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("DOMContentLoaded", function() {
tooltip.init();
});
</script>
Configure the components with data attributes
- Add a unique
id
to each tooltip you want the plugin to control, you must add them to theflix-tooltip
element; - Finally, connect the target to the tooltip by passing the tooltip
id
as value to the target'sdata-tooltip="<THE_ID>"
attribute; - 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; - If you wish to change the default event trigger to hover, just add
data-event="hover"
to the target; - To initialize the tooltip in a hidden state make sure to include the
hidden
attribute in the tooltip element; - 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.
Hello!
<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>