Tooltips
- Home
- Tooltips
Tooltip Position
Tooltip Position - View Code
<!-- Grid -->
<div class="grid grid-cols-3 gap-y-4 gap-x-2 max-w-60 mx-auto">
<div class="col-start-2 text-center">
<div class="hs-tooltip inline-block">
<button type="button" class="hs-tooltip-toggle size-10 inline-flex justify-center items-center gap-2 rounded-full bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
<i class="ti ti-chevron-up text-lg"></i>
<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 size-10 inline-flex justify-center items-center gap-2 rounded-full bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
<i class="ti ti-chevron-left text-lg"></i>
<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 size-10 inline-flex justify-center items-center gap-2 rounded-full bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
<i class="ti ti-chevron-right text-lg"></i>
<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 size-10 inline-flex justify-center items-center gap-2 rounded-full bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
<i class="ti ti-chevron-down text-lg"></i>
<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>
<!-- End Grid -->
Hover over the buttons below to see the four tooltip directions: top, right, bottom, and left.
User popover example
User popover example - View Code
<!-- User -->
<div class="hs-tooltip inline-block [--trigger:hover] sm:[--placement:right]">
<div class="hs-tooltip-toggle max-w-xs p-3 flex items-center gap-x-3 bg-white border border-gray-200 rounded-md shadow-sm dark:bg-transparent dark:border-gray-700">
<img class="inline-block size-9 rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80" alt="Image Description">
<!-- User Content -->
<div class="grow">
<h4 class="font-semibold text-sm text-gray-800 dark:text-white">
Amanda Harvey
</h4>
<p class="text-sm text-gray-800 md:text-gray-500 dark:text-white md:dark:text-gray-500">
amanda@email.com
</p>
</div>
<!-- End User Content -->
<!-- Popover Content -->
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity absolute invisible z-10 max-w-xs w-full bg-white border border-gray-100 text-start rounded-md shadow-md after:absolute after:top-0 after:-start-4 after:w-4 after:h-full dark:bg-gray-800 dark:border-gray-700" role="tooltip">
<!-- Header -->
<div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center gap-x-3">
<img class="flex-shrink-0 inline-block size-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80" alt="Image Description">
<div class="grow">
<h4 class="font-semibold text-gray-800 dark:text-white">
Amanda Harvey
<span class="ms-0.5 inline-flex items-center align-middle gap-x-1.5 py-0.5 px-1.5 rounded-md text-[11px] font-medium bg-gray-800 text-white dark:bg-white dark:text-gray-800">
PRO
</span>
</h4>
<p class="text-sm text-gray-500">
Storyteller
</p>
</div>
</div>
</div>
<!-- End Header -->
<!-- List -->
<ul class="py-3 px-4 space-y-1">
<li>
<div class="inline-flex items-center gap-x-3 text-sm text-gray-800 dark:text-neutral-200">
<i class="ti ti-building text-base leading-tight font-medium"></i>
Pixeel Ltd.
</div>
</li>
<li>
<div class="inline-flex items-center gap-x-3 text-sm text-gray-800 dark:text-neutral-200">
<i class="ti ti-phone text-base leading-tight font-medium"></i>
(892) 312-5483
</div>
</li>
<li>
<div class="inline-flex items-center gap-x-3 text-sm text-gray-800 dark:text-neutral-200">
<i class="ti ti-mail text-base leading-tight font-medium"></i>
amanda@email.com
</div>
</li>
</ul>
<!-- End List -->
<!-- Footer -->
<div class="py-2 px-4 flex justify-between items-center bg-gray-100 dark:bg-gray-800">
<a class="inline-flex items-center gap-x-1.5 text-xs text-gray-500 hover:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<i class="ti ti-flag text-base leading-tight font-medium"></i>
Flag
</a>
<button type="button" class="py-1.5 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border border-transparent bg-primary text-white hover:bg-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
Follow
</button>
</div>
<!-- End Footer -->
</div>
<!-- End Popover Content -->
</div>
</div>
<!-- End User -->
User popover example.
Amanda Harvey
amanda@email.com
Popover Direction
Popover Direction - View Code
<!-- Popover -->
<div class="hs-tooltip inline-block [--trigger:click] [--placement:left]">
<button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-chevron-left text-lg"></i>
<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-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
Left popover
</span>
</button>
</div>
<!-- End Popover -->
<!-- Popover -->
<div class="hs-tooltip inline-block [--trigger:click]">
<button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-chevron-up text-lg"></i>
<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-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
Top popover
</span>
</button>
</div>
<!-- End Popover -->
<!-- Popover -->
<div class="hs-tooltip inline-block [--trigger:click] [--placement:bottom]">
<button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-chevron-down text-lg"></i>
<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-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
Bottom popover
</span>
</button>
</div>
<!-- End Popover -->
<!-- Popover -->
<div class="hs-tooltip inline-block [--trigger:click] [--placement:right]">
<button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-chevron-right text-lg"></i>
<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-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
Right popover
</span>
</button>
</div>
<!-- End Popover -->
Four options are available: top, right, bottom, and left aligned.
Review popover example
Review popover example - View Code
<!-- Popover -->
<div class="hs-tooltip inline-block [--trigger:click]">
<div class="hs-tooltip-toggle block text-center">
<button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-primary hover:text-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:text-primary dark:hover:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
Preline review
<i class="ti ti-chevron-up text-lg"></i>
</button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity absolute invisible z-10 max-w-xs w-full bg-white border border-gray-100 text-start rounded-md shadow-md dark:bg-gray-800 dark:border-gray-700" role="tooltip">
<div class="p-4">
<!-- Header -->
<div class="mb-3 flex justify-between items-center gap-x-3">
<div class="flex items-center gap-x-2">
<h4 class="font-semibold text-gray-800 dark:text-white">
5.0
</h4>
<!-- Rating -->
<div class="flex">
<i class="ti ti-star-filled text-warning text-base"></i>
<i class="ti ti-star-filled text-warning text-base"></i>
<i class="ti ti-star-filled text-warning text-base"></i>
<i class="ti ti-star-filled text-warning text-base"></i>
<i class="ti ti-star-filled text-warning text-base"></i>
</div>
<!-- End Rating -->
</div>
<a class="inline-flex items-center gap-x-1 text-xs text-primary decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
See all (4)
</a>
</div>
<!-- End Header -->
<div class="mb-3">
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">5 star</span>
</div>
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
<div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 78%"></div>
</div>
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">78%</span>
</div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">4 star</span>
</div>
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 20%"></div>
</div>
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">20%</span>
</div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">3 star</span>
</div>
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100">
<div class="flex flex-col justify-center rounded-full overflow-hidden bg-yellow-400 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 6%"></div>
</div>
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">6%</span>
</div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">2 star</span>
</div>
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="flex flex-col justify-center rounded-full overflow-hidden bg-yellow-400 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 2%"></div>
</div>
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">2%</span>
</div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">1 star</span>
</div>
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="flex flex-col justify-center rounded-full overflow-hidden bg-yellow-400 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-warning" style="width: 0%"></div>
</div>
<div class="w-10 text-end">
<span class="text-sm text-gray-800 dark:text-white">0%</span>
</div>
</div>
<!-- End Progress -->
</div>
<a class="inline-flex items-center gap-x-1 text-xs text-gray-600 decoration-2 hover:underline dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-400" href="#">
How reviews and ratings work
<i class="ti ti-chevron-down text-base leading-tight font-medium"></i>
</a>
</div>
</div>
</div>
</div>
<!-- End Popover -->
Example with content.
Popover Focus event
Popover Focus event - View Code
<!-- Popover -->
<div class="hs-tooltip inline-block [--trigger:focus]">
<button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-chevron-up text-lg"></i>
<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-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
Focus me
</span>
</button>
</div>
<!-- End Popover -->
Use '[--trigger:focus]'class for focus event.
Popover Hover event
Popover Hover event - View Code
<!-- Popover -->
<div class="hs-tooltip inline-block [--trigger:hover]">
<button type="button" class="hs-tooltip-toggle flex justify-center items-center size-10 text-sm font-semibold rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-chevron-up text-lg"></i>
<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-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
Focus me
</span>
</button>
</div>
<!-- End Popover -->
Use '[--trigger:focus]'class for focus event.
Popover With content
Popover With content - View Code
<!-- Popover -->
<div class="hs-tooltip inline-block [--trigger:click]">
<div class="hs-tooltip-toggle block text-center">
<button type="button" class="flex justify-center items-center size-10 text-sm font-semibold rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-slate-900 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-chevron-up text-lg"></i>
</button>
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity absolute invisible z-10 max-w-xs bg-white border border-gray-100 text-start rounded-md shadow-md dark:bg-gray-800 dark:border-gray-700" role="tooltip">
<span class="pt-3 px-4 block text-lg font-bold text-gray-800 dark:text-white">Overview</span>
<div class="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
<img src="../assets/images/blog/blog-img2.jpg" alt="" class="w-full">
<p>This is a popover body with supporting text below as a natural lead-in to additional content.</p>
<dl class="mt-3">
<dt class="font-bold pt-3 first:pt-0 dark:text-white">Assigned to:</dt>
<dd class="text-gray-600 dark:text-gray-400">Mark Welson</dd>
<dt class="font-bold pt-3 first:pt-0 dark:text-white">Due:</dt>
<dd class="text-gray-600 dark:text-gray-400">December 21, 2021</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- End Popover -->
Example with content.
Overview
This is a popover body with supporting text below as a natural lead-in to additional content.
- Assigned to:
- Mark Welson
- Due:
- December 21, 2021
