To get started with using tooltips all you need to do is add the data-tooltip-target="{elementId}" data attribute to an element where elementId is the id of the tooltip component. In the following example you can see the button that will trigger the tooltip-default element to be shown when hovered or focused.

You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the data-tooltip-style="{ light | dark }" data attribute.

The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using the data-tooltip-placement="{ top | right | bottom | left}" data attribute.

You can choose the triggering event by using the data-tooltip-trigger="{ hover|click }" data attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to hover.

You can set tooltip animation styles by using the transition utility classes from Tailwind CSS. Make sure that you add transition-opacity and duration-{x} to set the animation duration.