Tooltip

Sprout provides a programmatic tooltip via Sprout.tooltip(element, text, options). There is no declarative HTML-only tooltip; you call the API when you need a tooltip (e.g. on a button or icon).

Basic usage

Call Sprout.tooltip(element, text, options) when the element exists.

Sprout.tooltip(element, 'Help text')
Sprout.tooltip(element, 'Below', { position: 'bottom' })

Options: position — 'top' (default), 'bottom', 'left', 'right'.

Live demo

Hover or focus the button or text below to see the tooltip. Tooltips are attached on page load via the script below.

Or hover this text

Usage notes

• Programmatic only: You must call Sprout.tooltip(el, text) after the element exists. No data-tooltip attribute is wired by default.
• Tooltips are shown on mouseenter and focus, hidden on mouseleave and blur.
• For simple native tooltips, you can use the HTML title attribute; Sprout's tooltip gives you styled, positioned content and control over placement.
• Ensure the target element is in the DOM and Sprout is loaded before calling tooltip.