Tooltip.js Documentation

Learn how to create awesome tooltips

Tooltip

Kind: global class

new Tooltip(reference, options)

Create a new Tooltip.js instance

Returns: Object - instance - The generated tooltip instance

Param Type Default Description
reference HTMLElement   The DOM node used as reference of the tooltip (it can be a jQuery element).
options Object    
options.placement String 'top' Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
options.arrowSelector String '.tooltip-arrow, .tooltip__arrow’ - className used to locate the DOM arrow element in the tooltip.
options.innerSelector String '.tooltip-inner, .tooltip__inner’ - className used to locate the DOM inner element in the tooltip.
options.container HTMLElement | String | false false Append the tooltip to a specific element.
options.delay Number | Object 0 Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: { show: 500, hide: 100 }
options.html Boolean false Insert HTML into the tooltip. If false, the content will inserted with textContent.
[options.template] String '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' Base HTML to used when creating the tooltip. The tooltip’s title will be injected into the .tooltip-inner or .tooltip__inner. .tooltip-arrow or .tooltip__arrow will become the tooltip’s arrow. The outermost wrapper element should have the .tooltip class.
options.title String | HTMLElement | TitleFunction '' Default title value if title attribute isn’t present.
[options.trigger] String 'hover focus' How tooltip is triggered - click, hover, focus, manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
options.closeOnClickOutside Boolean false Close a popper on click outside of the popper and reference element. This has effect only when options.trigger is ‘click’.
options.boundariesElement String | HTMLElement   The element used as boundaries for the tooltip. For more information refer to Popper.js’ boundariesElement docs
options.offset Number | String 0 Offset of the tooltip relative to its reference. For more information refer to Popper.js’ offset docs
options.popperOptions Object {} Popper options, will be passed directly to popper instance. For more information refer to Popper.js’ options docs

tooltip.show()

Reveals an element’s tooltip. This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.

Kind: instance method of Tooltip

tooltip.hide()

Hides an element’s tooltip. This is considered a “manual” triggering of the tooltip.

Kind: instance method of Tooltip

tooltip.dispose()

Hides and destroys an element’s tooltip.

Kind: instance method of Tooltip

tooltip.toggle()

Toggles an element’s tooltip. This is considered a “manual” triggering of the tooltip.

Kind: instance method of Tooltip

tooltip.updateTitleContent(title)

Updates the tooltip’s title content

Kind: instance method of Tooltip

Param Type Description
title String | HTMLElement The new content to use for the title

Tooltip.TitleFunction ⇒ String

Title function, its context is the Tooltip instance.

Kind: static typedef of Tooltip
Returns: String - placement - The desired title.