Tooltip

Tooltips display informative text when users hover over, or tap an target element.

Tooltip can be positioned around any element with any HTML content inside.

Tooltip is a JavaScript-only component, it doesn’t have any HTML layout.

Tooltip App Methods

We need to create/initialize the Tooltip. Let’s look at related App methods to work with Tooltip:

app.tooltip.create(parameters)- create Tooltip instance

Method returns created Tooltip instance

• targetEl - HTMLElement or string (with CSS Selector) or object (instance). Tooltip element or Tooltip instance to destroy.

app.tooltip.get(targetEl)- get Tooltip instance by its target HTML element

• targetEl - HTMLElement or string (with CSS Selector). Tooltip target element.

Method returns Tooltip instance

app.tooltip.show(targetEl)- show Tooltip

• targetEl - HTMLElement or string (with CSS Selector). Tooltip target element.

Method returns Tooltip instance

app.tooltip.hide(targetEl)- hide Tooltip

• el - HTMLElement or string (with CSS Selector). Tooltip target element.

Method returns Tooltip instance

• el - HTMLElement or string (with CSS Selector). Tooltip target element.
• text - string - new text to set in specified Tooltip.

Method returns Tooltip instance

Now let’s look at list of available parameters we need to create Tooltip:

Tooltip Methods & Properties

So to create Tooltip we have to call:

After that we have its initialized instance (like tooltip variable in example above) with useful methods and properties:

Tooltip will fire the following DOM events on tooltip element and events on app and tooltip instance:

App and Tooltip Instance Events

Tooltip instance emits events on both self instance and app instance. App instance events has same names prefixed with tooltip.

Tooltip Auto Initialization

In this case if you need to access created Tooltip instance you can use the app.tooltip.get app method:

var tooltip = app.tooltip.get('.profile-link');
// change tooltip text

// icons tooltip. One tooltip for all icons with "icon-tooltip" class
var iconTooltip = app.tooltip.create({
  text: 'Tooltip text',
});
// navbar link tooltip
var navbarTooltip = app.tooltip.create({
  targetEl: '.navbar-tooltip',
});