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

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

Method returns Tooltip instance

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

  • targetEl - 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:

ParameterTypeDefaultDescription
targetElHTMLElement
string
Tooltip target element. Tooltip will be shown around this element. HTMLElement or string with CSS selector of tooltip target element
textstringTooltip text or HTML content
offsetnumber0Extra offset (in px) to tooltip position
triggerstringhoverDefines how to trigger (open) Tooltip. Can be hover, click or manual.

If hover - tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices

If manual - tooltip visibility should be controlled with tooltip.show() and tooltip.hide() methods

cssClassstringAdditional css class will be added to Tooltip element. Can be used for additional tooltip styling
renderfunction (tooltip)Function to render tooltip element, must return full tooltip HTML layout string
containerElHTMLElement
string
Element to mount Tooltip to. (default to app root element app.el)
delegatedbooleanfalseEnabled delegated tooltip. Useful if you need to show same tooltip for multiple elements. In this case targetEl must be specified as CSS Selector string, and same tooltip will be reused for specified elements.
onobject

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.appLink to global app instance
tooltip.targetElTooltip target HTML element
tooltip.$targetElDom7 instance with tooltip target HTML element
tooltip.elTooltip itself HTML element
tooltip.$elDom7 instance with tooltip HTML element
tooltip.textTooltip text/content
tooltip.openedBoolean property indicating whether it is opened/visible or not
tooltip.paramsTooltip 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.setTargetEl(targetEl)Changes tooltip's target element to specified 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

EventTargetDescription
tooltip:showTooltip Element
Tooltip Target
Event will be triggered when Tooltip becomes visible
tooltip:hideTooltip Element
Tooltip Target
Event will be triggered when Tooltip becomes hidden
tooltip:beforedestroyTooltip 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.

EventArgumentsTargetDescription
show(tooltip)tooltipEvent will be triggered when Tooltip becomes visible. As an argument event handler receives Tooltip instance
tooltipShow(tooltip)app
hide(tooltip)tooltipEvent will be triggered when Tooltip becomes hidden. As an argument event handler receives Toolitp instance
tooltipHide(tooltip)app
beforeDestroy(tooltip)tooltipEvent 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');

CSS Variables

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

:root {
  --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
  --f7-tooltip-text-color: #fff;
  --f7-tooltip-border-radius: 4px;
  --f7-tooltip-padding: 8px 16px;
  --f7-tooltip-font-size: 14px;
  --f7-tooltip-font-weight: 500;
  --f7-tooltip-desktop-padding: 6px 8px;
  --f7-tooltip-desktop-font-size: 12px;
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Tooltip</div>
        <div class="right">
          <a href="#" class="link navbar-tooltip">
            <i class="icon f7-icons if-not-md">info_circle_fill</i>
            <i class="icon material-icons if-md">info_outline</i>
          </a>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong">
        <p>Tooltips display informative text when users hover over, or tap an target element.</p>
        <p>Tooltip can be positioned around any element with any HTML content inside.</p>
      </div>
      <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 style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
          <i style="font-size: 20px" class="icon material-icons 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. Sed a congue enim, ut
          dictum felis. Aliquam erat volutpat. Etiam id nisi in magna egestas malesuada. Sed vitae orci
          sollicitudin, accumsan nisi a, bibendum felis. Maecenas risus libero, gravida ut tincidunt auctor,
          <i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
          <i style="font-size: 20px" class="icon material-icons icon-tooltip if-md">info</i> aliquam non lectus. Nam
          laoreet turpis erat, eget bibendum leo suscipit nec.</p>
        <p>Vestibulum
          <i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
          <i style="font-size: 20px" class="icon material-icons icon-tooltip if-md">info</i> gravida dui magna, eget
          pulvinar ligula molestie hendrerit. Mauris vitae facilisis justo. Nam velit mi, pharetra sit amet luctus
          quis, consectetur a tellus. Maecenas ac magna sit amet eros aliquam rhoncus. Ut dapibus vehicula lectus,
          ac blandit felis ultricies at. In sollicitudin, lorem eget volutpat viverra, magna
          <i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
          <i style="font-size: 20px" class="icon material-icons icon-tooltip if-md">info</i> felis tempus nisl,
          porta
          consectetur nunc neque eget risus. Phasellus vestibulum leo at ante ornare, vel congue justo tincidunt.
        </p>
        <p>Praesent tempus enim id lectus porta, at rutrum purus imperdiet. Donec eget sem vulputate, scelerisque
          diam nec, consequat turpis. Ut vel convallis felis. Integer
          <i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
          <i style="font-size: 20px" class="icon material-icons icon-tooltip if-md">info</i> neque ex, sollicitudin
          vitae magna eget,
          ultrices volutpat dui. Sed placerat odio hendrerit consequat lobortis. Fusce pulvinar facilisis rhoncus.
          Sed erat ipsum, consequat molestie suscipit vitae, malesuada a
          <i style="font-size: 20px" class="icon f7-icons icon-tooltip if-not-md">info_circle_fill</i>
          <i class="icon material-icons icon-tooltip if-md">info</i> massa.</p>
      </div>
      <div class="block-title">Auto Initialization</div>
      <div class="block block-strong">
        <p>For simple cases when you don't need a lot of control over the Tooltip, it can be initialized
          automatically with <code>tooltip-init</code> class and <code>data-tooltip</code> attribute: <a
            style="display: inline-block" class="button button-round button-outline button-small tooltip-init"
            data-tooltip="Button tooltip text">Button with Tooltip</a></p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $on }) => {
    $on('pageInit', () => {
      var iconTooltip = $f7.tooltip.create({
        targetEl: '.icon-tooltip',
        text: 'Tooltip text',
      });

      var navbarTooltip = $f7.tooltip.create({
        targetEl: '.navbar-tooltip',
        text: 'One more tooltip<br>with more text<br><em>and custom formatting</em>'
      });
    });

    return $render;
  }
</script>