- Plugins
- Tooltip
Plugins
Tailwind CSS Tooltip
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
Installation
To get started, install Tooltip plugin via npm, else you can skip this step if you are already using Preline UI as a package.
npm i @preline/tooltip
Example
Hover over the buttons below to see the four tooltip directions: top, right, bottom, and left.
<div class="grid grid-cols-3 gap-y-4 gap-x-2 max-w-[15rem] mx-auto">
<div class="col-start-2 text-center">
<div class="hs-tooltip inline-block">
<button type="button" class="hs-tooltip-toggle w-10 h-10 inline-flex justify-center items-center gap-2 rounded-full bg-white/[.1] border border-white/[.3] text-white shadow-md shadow-gray-800/[.05] hover:bg-white hover:border-white hover:text-blue-600 hover:shadow-gray-800/[.1] transition">
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
Tooltip on top
</span>
</button>
</div>
</div>
<!-- End Col -->
<!-- Col -->
<div class="col-start-1 text-right">
<div class="hs-tooltip inline-block [--placement:left]">
<button type="button" class="hs-tooltip-toggle w-10 h-10 inline-flex justify-center items-center gap-2 rounded-full bg-white/[.1] border border-white/[.3] text-white shadow-md shadow-gray-800/[.05] hover:bg-white hover:border-white hover:text-blue-600 hover:shadow-gray-800/[.1] transition">
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M11.2792 1.64001L5.63273 7.28646C5.43747 7.48172 5.43747 7.79831 5.63273 7.99357L11.2792 13.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
Tooltip on left
</span>
</button>
</div>
</div>
<!-- End Col -->
<!-- Col -->
<div class="col-start-3">
<div class="hs-tooltip inline-block [--placement:right]">
<button type="button" class="hs-tooltip-toggle w-10 h-10 inline-flex justify-center items-center gap-2 rounded-full bg-white/[.1] border border-white/[.3] text-white shadow-md shadow-gray-800/[.05] hover:bg-white hover:border-white hover:text-blue-600 hover:shadow-gray-800/[.1] transition">
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
Tooltip on right
</span>
</button>
</div>
</div>
<!-- End Col -->
<!-- Col -->
<div class="col-start-2 text-center">
<div class="hs-tooltip inline-block [--placement:bottom]">
<button type="button" class="hs-tooltip-toggle w-10 h-10 inline-flex justify-center items-center gap-2 rounded-full bg-white/[.1] border border-white/[.3] text-white shadow-md shadow-gray-800/[.05] hover:bg-white hover:border-white hover:text-blue-600 hover:shadow-gray-800/[.1] transition">
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
Tooltip on bottom
</span>
</button>
</div>
</div>
<!-- End Col -->
</div>
Basic usage
Prefer to create your own style? Here is a completely unstylized example.
<div class="hs-tooltip inline-block">
<button type="button" class="hs-tooltip-toggle">
Hover me
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-white" role="tooltip">
Tooltip on top
</span>
</button>
</div>
Events
Show any tooltip event example.
window.addEventListener('show.hs.tooltip', ($tooltipEl) => {...})
// OR
HSTooltip.on('show', ($tooltipEl) => {...})
Show specific tooltip event example.
$tooltipEl.addEventListener('show.hs.tooltip', (evt) => {...})
Demo examples
Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.
Check out Preline UI Tooltip