Tooltip
Tailwind CSS and Alpine JS Tooltip
Tooltips are a great way to provide additional information or context to users without disrupting their current workflow.
Default tooltip
A tooltip that appears when you focus or hover over the trigger element.
HTML
<div class="">
<button type="button" class="" aria-describedby="tooltipExample">Hover Me</button>
<div id="tooltipExample" class="" role="tooltip"></div>
</div>
Click tooltip
Requires Alpine JS
A tooltip that appears when you click on the trigger element.
HTML
<div x-data="{ showTooltip: false }" class="">
<button @click="showTooltip = !showTooltip" type="button" class="" aria-describedby="tooltipExample">Hover Me</button>
<div x-cloak x-show="showTooltip" @click.outside="showTooltip = false" id="tooltipExample" class="" role="tooltip" x-transition:enter="transition ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-out" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
</div>
Tooltip with description
A tooltip with a title and description.
A rich tooltip that contains longer text and is usually used to add a description.
HTML
<div class="">
<button type="button" class="" aria-describedby="tooltipExample">Hover Me</button>
<div id="tooltipExample" class="" role="tooltip">
<span class=""></span>
<p class="">A rich tooltip that contains longer text and is usually used to add a description.</p>
</div>
</div>
Data
List of all Alpine JS data used in this component.
| Property | Description |
|---|---|
| showTooltip |
Boolean - Shows/Hides the tooltip |