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 Layout

    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.

    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

    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 Parameters

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

    Parameter Type Default Description
    targetEl HTMLElement
    string
    Tooltip target element. Tooltip will be shown around this element. HTMLElement or string with CSS selector of tooltip target element
    text string Tooltip text or HTML content
    cssClass string Additional css class will be added to Tooltip element. Can be used for additional tooltip styling
    render function (tooltip) Function to render tooltip element, must return full tooltip HTML layout string
    on object Object with events handlers. For example:
    var tooltip = app.tooltip.create({
      targetEl: '.some-link'
      on: {
        show: function () {
          console.log('Tooltip became visible')
        }
      }
    })
    

    Tooltip Methods & Properties

    So to create Tooltip we have to call:

    var tooltip = app.tooltip.create({ /* parameters */ })

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

    Properties
    tooltip.app Link to global app instance
    tooltip.targetEl Tooltip target HTML element
    tooltip.$targetEl Dom7 instance with tooltip target HTML element
    tooltip.el Tooltip itself HTML element
    tooltip.$el Dom7 instance with tooltip HTML element
    tooltip.text Tooltip text/content
    tooltip.opened Boolean property indicating whether it is opened/visible or not
    tooltip.params Tooltip parameters
    Methods
    tooltip.show(targetEl) Show tooltip around targetEl element. If targetEl is not specified, then it will use targetEl passed in parameters on initialization
    tooltip.hide() Hide tooltip
    tooltip.setText(text) Change tooltip text or HTML content to the new one
    tooltip.destroy() Destroys tooltip instance
    tooltip.on(event, handler) Add event handler
    tooltip.once(event, handler) Add event handler that will be removed after it was fired
    tooltip.off(event, handler) Remove event handler
    tooltip.off(event) Remove all handlers for specified event
    tooltip.emit(event, ...args) Fire event on instance

    Tooltip Events

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

    DOM Events

    Event Target Description
    tooltip:show Tooltip Element
    Tooltip Target
    Event will be triggered when Tooltip becomes visible
    tooltip:hide Tooltip Element
    Tooltip Target
    Event will be triggered when Tooltip becomes hidden
    tooltip:beforedestroy Tooltip Element
    Tooltip Target
    Event will be triggered right before Tooltip instance will be destroyed

    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.

    Event Arguments Target Description
    show (tooltip) tooltip Event will be triggered when Tooltip becomes visible. As an argument event handler receives Tooltip instance
    tooltipShow (tooltip) app
    hide (tooltip) tooltip Event will be triggered when Tooltip becomes hidden. As an argument event handler receives Toolitp instance
    tooltipHide (tooltip) app
    beforeDestroy (tooltip) tooltip Event will be triggered right before Tooltip instance will be destroyed. As an argument event handler receives Tooltip instance
    tooltipBeforeDestroy (tooltip) app

    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:

    <!-- Add tooltip-init class and specify tooltip text in data-tooltip attribute -->
    <a href="/profile/" class="link tooltip-init profile-link" data-tooltip="Profile settings">
      <i class="profile-icon"></i>
    </a>

    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
    tooltip.setText('Profile');
    

    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-ios">info</i>
            <i class="icon material-icons if-md">info_outline</i>
          </a>
        </div>
      </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-ios">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>
    ...
    
    <!-- button with auto init tooltip -->
    <a class="button button-round button-outline button-small tooltip-init" data-tooltip="Button tooltip text">Button with Tooltip</a>
    // icons tooltip. One tooltip for all icons with "icon-tooltip" class
    var iconTooltip = app.tooltip.create({
      targetEl: '.icon-tooltip',
      text: 'Tooltip text',
    });
    
    // navbar link tooltip
    var navbarTooltip = app.tooltip.create({
      targetEl: '.navbar-tooltip',
      text: 'One more tooltip<br>with more text<br><em>and custom formatting</em>'
    });