5.3 KiB
Tooltip
Kind: global class
- Tooltip
- new Tooltip(reference, options)
- instance
- static
- .TitleFunction ⇒
String
- .TitleFunction ⇒
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.