1. Default tooltip

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.

2. Tooltip style

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.

3. Tooltip placement

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.

4. Tooltip Triggering

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.

5. Animated Tooltip

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.

Subscribe for updates

Stay in Touch with us and get all the updates for next offers and Deals.

Copyright © NYCompany | All Rights Reserved.