Tailwind CSS Popover
Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered based on multiple styles
Get started with the popover component to show any type of content inside a pop-up box when hovering or clicking over a trigger element. There are multiple examples that you can choose from, such as showing more information about a user profile, company profile, password strength, and more.
Make sure that you have the Tailwind JavaScript included in your project to enable the popover interactivity by following the quickstart guide.
Default popover #
Initialize a new popover by adding the data-popover-target="{elementId}" data attribute to the trigger element where elementId is the id of the popover component.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Popover title
And here's some amazing content. It's very engaging. Right?
<button data-popover-target="popover-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default popover</button>
<div data-popover id="popover-default" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover title</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
<div data-popper-arrow></div>
</div>User profile #
Use this example to show more information about a user profile when hovering over the trigger component.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
<button data-popover-target="popover-user-profile" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">User profile</button>
<div data-popover id="popover-user-profile" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600">
<div class="p-3">
<div class="flex items-center justify-between mb-2">
<a href="#">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Jese Leos">
</a>
<div>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Follow</button>
</div>
</div>
<p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
<a href="#">Jese Leos</a>
</p>
<p class="mb-3 text-sm font-normal">
<a href="#" class="hover:underline">@jeseleos</a>
</p>
<p class="mb-4 text-sm font-light">Open-source contributor. Building <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">larntocode.com</a>.</p>
<ul class="flex text-sm font-light">
<li class="mr-2">
<a href="#" class="hover:underline">
<span class="font-semibold text-gray-900 dark:text-white">799</span>
<span>Following</span>
</a>
</li>
<li>
<a href="#" class="hover:underline">
<span class="font-semibold text-gray-900 dark:text-white">3,758</span>
<span>Followers</span>
</a>
</li>
</ul>
</div>
<div data-popper-arrow></div>
</div>Company profile #
This example can be used to show more information about a company profile.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Tech company
Open-source library of Tailwind CSS components and Figma design system.
- https://larntocode.com/
- 4,567,346 people like this including 5 of your friends
<button data-popover-target="popover-company-profile" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Company profile</button>
<div data-popover id="popover-company-profile" role="tooltip" class="absolute z-10 invisible inline-block text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-80 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600">
<div class="p-3">
<div class="flex">
<div class="mr-3 shrink-0">
<a href="#" class="block p-2 bg-gray-100 rounded-lg dark:bg-gray-700">
<img class="w-8 h-8 rounded-full" src="https://larntocode.com/docs/images/logo.svg" alt="Tailwind logo">
</a>
</div>
<div>
<p class="mb-1 text-base font-semibold leading-none text-gray-900 dark:text-white">
<a href="#" class="hover:underline">Tailwind</a>
</p>
<p class="mb-3 text-sm font-normal">
Tech company
</p>
<p class="mb-4 text-sm font-light">Open-source library of Tailwind CSS components and Figma design system.</p>
<ul class="text-sm font-light">
<li class="flex items-center mb-2">
<span class="mr-1 font-semibold text-gray-400">
<svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd"></path></svg>
</span>
<a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">https://larntocode.com/</a>
</li>
<li class="flex items-start mb-2">
<span class="mr-1 font-semibold text-gray-400">
<svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</span>
<span>4,567,346 people like this including 5 of your friends</span>
</li>
</ul>
<div class="flex mb-3 -space-x-3">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/docs/images/people/profile-picture-5.jpg" alt="">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/docs/images/people/profile-picture-2.jpg" alt="">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800" src="/docs/images/people/profile-picture-3.jpg" alt="">
<a class="flex items-center justify-center w-8 h-8 text-xs font-medium text-white bg-gray-400 border-2 border-white rounded-full hover:bg-gray-500 dark:border-gray-800" href="#">+3</a>
</div>
<div class="flex">
<button type="button" class="inline-flex items-center justify-center w-full px-5 py-2 mr-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"><svg class="w-4 h-4 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>Like page</button>
<button class="inline-flex items-center px-2 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shrink-0 focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" type="button">
<svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"></path></svg>
</button>
</div>
</div>
</div>
</div>
<div data-popper-arrow></div>
</div>Image popover #
Use this example to trigger a popover component with detailed information and an image when hovering over a portion of highlighted text inspired by Wikipedia and other large news outlets.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Due to its central geographic location in Southern Europe, Italy has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy
About Italy
Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also considered part of Western Europe. A unitary parliamentary republic with Rome as its capital and largest city.
Read more
<p class="font-light text-gray-500 dark:text-gray-400">Due to its central geographic location in Southern Europe, <a href="#" class="text-blue-600 underline dark:text-blue-500 hover:no-underline" data-popover-target="popover-image">Italy</a> has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy</p>
<div data-popover id="popover-image" role="tooltip" class="absolute z-10 invisible inline-block text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-96 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600">
<div class="grid grid-cols-5">
<div class="col-span-3 p-3">
<div class="space-y-2">
<h3 class="font-semibold text-gray-900 dark:text-white">About Italy</h3>
<p>Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also considered part of Western Europe. A unitary parliamentary republic with Rome as its capital and largest city.</p>
<a href="#" class="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700">Read more <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg></a>
</div>
</div>
<img src="/docs/images/popovers/italy.png" class="h-full col-span-2" alt="Italy map" />
</div>
<div data-popper-arrow></div>
</div>Description popover #
Show helpful information inside a popover when hovering over a question mark button.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
This is just some informational text
Activity growth - Incremental
Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.
Calculation
For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.
Read more<p class="flex items-center text-sm font-light text-gray-500 dark:text-gray-400">This is just some informational text <button data-popover-target="popover-description" data-popover-placement="bottom-end" type="button"><svg class="w-4 h-4 ml-2 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg><span class="sr-only">Show information</span></button></p>
<div data-popover id="popover-description" role="tooltip" class="absolute z-10 invisible inline-block text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
<div class="p-3 space-y-2">
<h3 class="font-semibold text-gray-900 dark:text-white">Activity growth - Incremental</h3>
<p>Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.</p>
<h3 class="font-semibold text-gray-900 dark:text-white">Calculation</h3>
<p>For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.</p>
<a href="#" class="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700">Read more <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg></a>
</div>
<div data-popper-arrow></div>
</div>Progress popover #
Show a progress bar with details inside a popover when hovering over a settings button.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
<button data-popover-target="popover-description" type="button" class="text-white bg-blue-700 hover:bg-blue-800 inline-flex items-center focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2.5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"></path><path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"></path><path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z"></path></svg> Storage status</button>
<div data-popover id="popover-description" role="tooltip" class="absolute z-10 invisible inline-block text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
<div class="p-3 space-y-2">
<h3 class="font-semibold text-gray-900 dark:text-white">Available storage</h3>
<p>This server has <span class="font-semibold text-gray-900 dark:text-white">30</span> of <span class="font-semibold text-gray-900 dark:text-white">150 GB</span> of block storage remaining.</p>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 85%"></div>
</div>
<a href="#" class="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700">Upgrade now <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg></a>
</div>
<div data-popper-arrow></div>
</div>Password strength #
Dynamically show the password strength progress when creating a new password positioned relative to the input element.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
<form>
<div class="mb-6">
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
<input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
<input data-popover-target="popover-password" data-popover-placement="bottom" type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
<div data-popover id="popover-password" role="tooltip" class="absolute z-10 invisible inline-block text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
<div class="p-3 space-y-2">
<h3 class="font-semibold text-gray-900 dark:text-white">Must have at least 6 characters</h3>
<div class="grid grid-cols-4 gap-2">
<div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
<div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
<div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
<div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
</div>
<p>It’s better to have:</p>
<ul>
<li class="flex items-center mb-1">
<svg class="w-4 h-4 mr-2 text-green-400 dark:text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
Upper & lower case letters
</li>
<li class="flex items-center mb-1">
<svg class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
A symbol (#$&)
</li>
<li class="flex items-center">
<svg class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
A longer password (min. 12 chars.)
</li>
</ul>
</div>
<div data-popper-arrow></div>
</div>
</div>
<div class="flex items-start mb-6">
<div class="flex items-center h-5">
<input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" required>
</div>
<label for="remember" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
</form>Placement #
Set the position of the popover component relative to the trigger element by using the data-popover-placement="{top|right|bottom"left}" data attribute and its values.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Popover top
And here's some amazing content. It's very engaging. Right?
Popover right
And here's some amazing content. It's very engaging. Right?
Popover bottom
And here's some amazing content. It's very engaging. Right?
Popover left
And here's some amazing content. It's very engaging. Right?
<button data-popover-target="popover-top" data-popover-placement="top" type="button" class="text-white mb-3 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Top popover</button>
<div data-popover id="popover-top" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover top</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
<div data-popper-arrow></div>
</div>
<button data-popover-target="popover-right" data-popover-placement="right" type="button" class="text-white mb-3 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Right popover</button>
<div data-popover id="popover-right" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover right</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
<div data-popper-arrow></div>
</div>
<button data-popover-target="popover-bottom" data-popover-placement="bottom" type="button" class="text-white mb-3 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Bottom popover</button>
<div data-popover id="popover-bottom" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover bottom</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
<div data-popper-arrow></div>
</div>
<button data-popover-target="popover-left" data-popover-placement="left" type="button" class="text-white mb-3 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Left popover</button>
<div data-popover id="popover-left" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover left</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
<div data-popper-arrow></div>
</div>Triggering #
Manually set the trigger event by adding the data-popover-trigger="{hover|click}" data attribute to the trigger element choosing between a hover or click event. By default it is set to hover.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Popover hover
And here's some amazing content. It's very engaging. Right?
Popover click
And here's some amazing content. It's very engaging. Right?
<button data-popover-target="popover-hover" data-popover-trigger="hover" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Hover popover</button>
<div data-popover id="popover-hover" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover hover</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
<div data-popper-arrow></div>
</div>
<button data-popover-target="popover-click" data-popover-trigger="click" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Click popover</button>
<div data-popover id="popover-click" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover click</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
<div data-popper-arrow></div>
</div>Offset #
Increase or decrease the default offset by adding the data-popover-offset="{offset}" data attribute where the value is an integer.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Popover offset
And here's some amazing content. It's very engaging. Right?
<button data-popover-target="popover-offset" data-popover-offset="30" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Offset popover</button>
<div data-popover id="popover-offset" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover offset</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
<div data-popper-arrow></div>
</div>Animation #
Customize the animation of the popover component by using the utility classes from Tailwind CSS such as transition-opacity and duration-{x}.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Popover animation
And here's some amazing content. It's very engaging. Right?
<button data-popover-target="popover-animation" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Animated popover</button>
<div data-popover id="popover-animation" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover animation</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
<div data-popper-arrow></div>
</div>Disable arrow #
You can also disable the popover arrow by not including the data-popper-arrow element.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Popover no arrow
And here's some amazing content. It's very engaging. Right?
<button data-popover-target="popover-no-arrow" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default popover</button>
<div data-popover id="popover-no-arrow" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">Popover no arrow</h3>
</div>
<div class="px-3 py-2">
<p>And here's some amazing content. It's very engaging. Right?</p>
</div>
</div>JavaScript behaviour #
The Popover API from Tailwind can be used to create an object that will show a pop-up box relative to the main trigger element based on the parameters, options, and methods that you provide.
Object parameters #
Create a new Popover object with the object parameters like the trigger element, the popover content element, and extra options to set the placement and offset.
| Parameter | Type | Required | Description |
|---|---|---|---|
targetEl
|
Element | Required | Set the popover component as the target element. |
triggerEl
|
Element | Required | Set an element to trigger the popover when clicking or hovering (ie. a button, text). |
options
|
Object | Optional | Use the options parameter to set the positioning of the popover element, trigger type, offset, and more. |
Options #
Use the following options as the third parameter for the Popover object to set the positioning, offset, and the trigger type (hover or click).
| Option | Type | Description |
|---|---|---|
placement
|
String |
Set the position of the popover element relative to the trigger element choosing from top|right|bottom|left.
|
triggerType
|
String |
Set the event type that will trigger the popover content choosing between hover|click.
|
offset
|
Integer | Set the offset distance between the popover and the trigger element. |
onHide
|
Function | Set a callback function when the popover is hidden. |
onShow
|
Function | Set a callback function when the popover is shown. |
Methods #
Use the methods from the Popover object to programatically show or hide the popover from directly JavaScript.
| Method | Description |
|---|---|
show()
|
Use this method on the Popover object to show the popover content. |
hide()
|
Use this method on the Popover object to hide the popover content. |
Example #
Use following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Popover object.
First of all, set the target element as the popover itself and the trigger element which can be a button or text element.
After that you can also set the options object to change the placement and trigger type of the popover, alongside with the callback functions.
// set the popover content element
const targetEl = document.getElementById('popoverContent')
// set the element that trigger the popover using hover or click
const triggerEl = document.getElementById('popoverButton')
// options with default values
const options = {
placement: 'bottom',
triggerType: 'hover',
offset: 10,
onHide: () => {
console.log('popover is shown')
},
onShow: () => {
console.log('popover is hidden')
}
}
Create a new Popover object based on the options above.
/*
* targetEl: required
* triggerEl: required
* options: optional
*/
const popover = new Popover(targetEl, triggerEl, options)
Use the show and hide methods on the Popover object to programatically show and hide the popover element using JavaScript.
// show the popover
popover.show()
// hide the popover
popover.hide()
HTML Markup #
Use the following HTML code for the JavaScript example above.
<button
id="popoverButton"
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Default popover
</button>
<div
data-popover
id="popoverContent"
role="tooltip"
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 dark:bg-gray-700"
>
Popover content
<div class="popover-arrow" data-popper-arrow></div>
</div>