The Tooltip is a small pop-up element that appears when the user moves the mouse pointer over an element. Use it when you want to specify extra information about something when the user moves the mouse pointer over an element. Below we are presenting an example of the Tooltip component that you can use in your project based on Taco.
<x-tooltip
text="And here's some amazing content. It's very engaging. Right?"
placement="top"
>
<x-button>Tooltip top</x-button>
</x-tooltip>
You can simply change the tooltip position by changing the placement=" " attribute with the following values: top, right, bottom, left.
<x-tooltip
text="And here's some amazing content. It's very engaging. Right?"
placement="top"
>
<x-button>Tooltip top</x-button>
</x-tooltip>
<x-tooltip
text="And here's some amazing content. It's very engaging. Right?"
placement="right"
>
<x-button>Tooltip right</x-button>
</x-tooltip>
<x-tooltip
text="And here's some amazing content. It's very engaging. Right?"
placement="bottom"
>
<x-button>Tooltip bottom</x-button>
</x-tooltip>
<x-tooltip
text="And here's some amazing content. It's very engaging. Right?"
placement="left"
>
<x-button>Tooltip left</x-button>
</x-tooltip>