- Plugins
- Tooltip & Popover
Plugins
Tailwind CSS Tooltip & Popover
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
Installation
To get started, install Tooltip & Popover 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="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></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 shadow-sm dark:bg-slate-700" role="tooltip">
Tooltip on top
</span>
</button>
</div>
</div>
<!-- End Col -->
<!-- Col -->
<div class="col-start-1 text-end">
<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="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></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 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="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></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 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="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></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 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>
Methods
The HSTooltip
object is contained within the global window
object
Force show tooltip (public method).
const tooltip = new HSTooltip(document.querySelector('#tooltip'));
const showBtn = document.querySelector('#show-btn');
showBtn.addEventListener('click', () => {
tooltip.show();
});
Force show tooltip (static method).
const showBtn = document.querySelector('#show-btn');
showBtn.addEventListener('click', () => {
HSTooltip.show(document.querySelector('#tooltip'));
});
Open item (mixed).
const { element } = HSTooltip.getInstance('#tooltip', true);
const showBtn = document.querySelector('#show-btn');
showBtn.addEventListener('click', () => {
element.show();
});
Events
An example where a function is run every time a tooltip shows.
const el = HSTooltip.getInstance('#tooltip');
el.on('show', (instance) => {...});
Demo examples
Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.