Tooltip

The tooltip plugin is a very handy script that will handle toggling tooltips and also wire them with the required accessibility features.

The tooltip plugin is a very handy script that will handle all the necessary attributes to toggle tooltips and also wire them with the required accessibility features.

We strongly advise that you use the plugin since controlling tooltips requires you to keep many attributes in sync and the plugin makes things a lot easier!

Add the plugin to your page:

Include the plugin from our CDN at the end of your page and then initialize it with:

<script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/tooltip.js"></script>
<script>
  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    tooltip.init();
  });
</script>

Configure the components with data attributes

  1. Add a unique id to each tooltip you want the plugin to control, you must add them to the flix-tooltip element;
  2. Finally, connect the target to the tooltip by passing the tooltip id as value to the target's data-tooltip="<THE_ID>" attribute;
  3. Use data-tooltip-fixed attributed to switch into "fixed" positioning mode, this is handy if your target wrapped with an "overflow: hidden" element. This uses "fixed" or "anchor" positioning (depending on your browser) to make the tooltip follow the target;
  4. If you wish to change the default event trigger to hover, just add data-event="hover" to the target;
  5. To initialize the tooltip in a hidden state make sure to include the hidden attribute in the tooltip element;
  6. If your tooltip has a close button, the plugin will attach close events to the close button as well;

Voila! The plugin will automatically add the correct role and setup all aria attributes according to the event you chose.

<span class="flix-tooltip-target flix-space-2-right">
  <button type="button" class="flix-btn" data-tooltip="tooltip-example" data-tooltip-fixed="">
    Toggle tooltip
  </button>
  <div id="tooltip-example" class="flix-tooltip" hidden="">
    <div class="flix-tooltip__content">
      Hello!
    </div>
    <button class="flix-tooltip__close flix-btn flix-btn--square flix-btn--sm flix-btn--link" aria-label="Close Tooltip"></button>
  </div>
</span>