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

• parameters - object. Object with tooltip parameters

Method returns created Tooltip instance

app.tooltip.destroy(targetEl)- destroy Tooltip instance

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

• 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

Method returns Tooltip instance

app.tooltip.setText(targetEl, text)- change Tooltip text

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

Method returns Tooltip instance

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

If you don’t need to use Tooltip API and your Tooltip target element is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding tooltip-init class to target element, and specifying tooltip text in its data-tooltip attribute:

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

Below is the list of related CSS variables (CSS custom properties).

Examples

<!-- navbar with link with tooltip -->
<div class="navbar">
  <div class="navbar-inner sliding">
    <div class="title">Tooltip</div>
    <div class="right">
      <a href="#" class="link navbar-tooltip">
        <i class="icon f7-icons if-not-md">info</i>
        <i class="icon material-icons if-md">info_outline</i>
    </div>
</div>
...
<!-- icons with tooltip in text -->
<div class="block block-strong">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia augue urna, in tincidunt augue hendrerit ut. In nulla massa, facilisis non consectetur a, tempus semper ex. Proin eget volutpat nisl. Integer lacinia maximus nunc molestie viverra. <i class="icon f7-icons color-blue icon-tooltip if-not-md">info_fill</i> <i class="icon material-icons color-blue icon-tooltip if-md">info</i> Etiam ullamcorper ultricies ipsum, ut congue tortor rutrum at. Vestibulum rutrum risus a orci dictum, in placerat leo finibus...
  ...
</div>
...
<a class="button button-round button-outline button-small tooltip-init" data-tooltip="Button tooltip text">Button with Tooltip</a>