Tooltip
A simple tooltip element that can be used to show additional information.
+
Tailwind and Alpine
Copied!
hover me
<div
x-data="{
tooltipVisible: false,
tooltipText: 'Tooltip text',
tooltipArrow: true,
tooltipPosition: 'top',
}"
x-init="$refs.content.addEventListener('mouseenter', () => { tooltipVisible = true; }); $refs.content.addEventListener('mouseleave', () => { tooltipVisible = false; });"
class="relative">
<div x-ref="tooltip" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-0.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-0.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-0.5 right-0 translate-x-full' : tooltipPosition == 'right' }" class="absolute w-auto text-sm" x-cloak>
<div x-show="tooltipVisible" x-transition class="relative px-2 py-1 text-white rounded bg-black/90">
<p x-text="tooltipText" class="block flex-shrink-0 text-xs whitespace-nowrap"></p>
<div x-ref="tooltipArrow" x-show="tooltipArrow" :class="{ 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom', 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right' }" class="inline-flex overflow-hidden absolute justify-center items-center">
<div :class="{ 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom', 'origin-top-right -rotate-45' : tooltipPosition == 'right' }" class="w-1.5 h-1.5 transform bg-black/90"></div>
</div>
</div>
</div>
<div x-ref="content" class="px-3 py-1 text-xs rounded-full cursor-pointer text-neutral-500 bg-neutral-100">hover me</div>
</div>Create a Tooltip Plugin
This specific element would be easier to re-use in your applications if it were converted into its own plugin. Here's a guide that will show you how to convert this element into it's own plugin.
Data
Below you will find the data properties available in the x-data attribute of this element.
| Property and Description | Description |
|---|---|
| tooltipVisible | A boolean value that will show or hide the tooltip. |
| A boolean value that will show or hide the tooltip. | |
| tooltipText | The text inside the tooltip. |
| The text inside the tooltip. | |
| tooltipArrow | A boolean value that indicates whether or not to show the tooltip arrow. |
| A boolean value that indicates whether or not to show the tooltip arrow. | |
| tooltipPosition | The position to display the tooltip. This value can be 'top', 'right', 'bottom', or 'left'. |
| The position to display the tooltip. This value can be 'top', 'right', 'bottom', or 'left'. |
More Examples
Below you will find more Tooltip examples you may wish to use in your sites.
Copied!
hover me
<div
x-data="{
tooltipVisible: false,
tooltipText: 'Tooltip text',
tooltipArrow: false,
tooltipPosition: 'left',
}"
x-init="$refs.content.addEventListener('mouseenter', () => { tooltipVisible = true; }); $refs.content.addEventListener('mouseleave', () => { tooltipVisible = false; });"
class="relative">
<div x-ref="tooltip" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-0.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-0.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-0.5 right-0 translate-x-full' : tooltipPosition == 'right' }" class="absolute w-auto text-sm" x-cloak>
<div x-show="tooltipVisible" x-transition class="relative px-2 py-1 text-white rounded-md bg-blue-600/90">
<p x-text="tooltipText" class="block flex-shrink-0 text-xs whitespace-nowrap"></p>
<div x-ref="tooltipArrow" x-show="tooltipArrow" :class="{ 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom', 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right' }" class="inline-flex overflow-hidden absolute justify-center items-center">
<div :class="{ 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom', 'origin-top-right -rotate-45' : tooltipPosition == 'right' }" class="w-1.5 h-1.5 bg-blue-600/90 transform"></div>
</div>
</div>
</div>
<div x-ref="content" class="px-3 py-1 text-xs rounded-full cursor-pointer text-neutral-500 bg-neutral-100">hover me</div>
</div>
Copied!
hover me
<div
x-data="{
tooltipVisible: false,
tooltipText: 'Tooltip text',
tooltipArrow: true,
tooltipPosition: 'right',
}"
x-init="$refs.content.addEventListener('mouseenter', () => { tooltipVisible = true; }); $refs.content.addEventListener('mouseleave', () => { tooltipVisible = false; });"
class="relative">
<div x-ref="tooltip" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-0.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-0.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-0.5 right-0 translate-x-full' : tooltipPosition == 'right' }" class="absolute w-auto text-sm" x-cloak>
<div x-show="tooltipVisible"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90 -translate-x-2"
x-transition:enter-end="opacity-100 scale-100 translate-x-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 scale-100 translate-x-0"
x-transition:leave-end="opacity-0 scale-90 -translate-x-2"
class="relative px-2 py-1 text-white bg-gradient-to-t rounded from-blue-600/90 to-purple-600/90">
<p x-text="tooltipText" class="block flex-shrink-0 text-xs whitespace-nowrap"></p>
<div x-ref="tooltipArrow" x-show="tooltipArrow" :class="{ 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom', 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right' }" class="inline-flex overflow-hidden absolute justify-center items-center">
<div :class="{ 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom', 'origin-top-right -rotate-45' : tooltipPosition == 'right' }" class="w-1.5 h-1.5 transform bg-indigo-600/90"></div>
</div>
</div>
</div>
<div x-ref="content" class="px-3 py-1 text-xs rounded-full cursor-pointer text-neutral-500 bg-neutral-100">hover me</div>
</div>
