Component
Tailwind CSS popover
There are instances where the user has no idea about the button he is interacting with or wishes to know what action will particular button perform; in such cases popover or pop up boxes can be shown which will explain complete description or helper text about particular action.
Various details can be displayed with the help of popover while clicking or hovering on the button. These texts can be related to user profile, action, password strength, minimum criteria or mandatory details.
Default popover
New popover can be created by adding data-tooltip-target="{elementId}" data attribute where elementID will be the id of the popup component. Here is an example.
<div class="inline-block">
<button class="py-2.5 px-5 text-xs bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" href="#" data-tooltip-target="default-popover"> Default popover <div class="inline-block absolute mb-2 bottom-full left-1/2 -translate-x-1/2 invisible z-10 py-4 px-5 bg-white text-sm text-gray-600 rounded-xl shadow-md" role="tooltip" id="default-popover">
<h5 class="mb-1 text-sm text-gray-900 font-medium text-left">Popover Title</h5>
<p class="text-sm text-gray-600 font-normal">Popover with supporting text</p>
</div>
</button>
</div>Popover with header
This will provide a set of large textual information inside the popover when the user hovers on the button.It will disaply separate header on top.
<div class="inline-block">
<button class="py-2.5 px-5 text-xs bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" href="#" data-tooltip-target="popover-header"> Popover header <div class="w-72 inline-block absolute mb-2 bottom-full left-1/2 -translate-x-1/2 invisible z-10 bg-white rounded-xl shadow-md text-left" role="tooltip" id="popover-header">
<h5 class="mb-1 text-sm text-gray-900 font-medium px-5 py-3 border-b border-gray-200">Popover Title</h5>
<p class="text-sm text-gray-600 font-normal px-5 py-3">This is the popover with supporting text below</p>
</div>
</button>
</div>Popover with user profile
This displays complete information about the user just by hovering over the user profile button viz. avatar or profile photo, user name, number of followers, active or inactive status, his coordinates, followers etc.
Harsh p
@harshp11- Product designer
- pagedone.io
<div class="inline-block">
<button class="py-2.5 px-5 text-xs bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" href="#" data-tooltip-target="popover-user-profile"> User profile </button>
<div class="w-80 inline-block absolute mb-2 bottom-full left-1/2 -translate-x-1/2 z-10 bg-white rounded-xl shadow-md text-left invisible" role="tooltip" id="popover-user-profile">
<div class="p-5 border-b border-gray-200 flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="https://pagedone.io/asset/uploads/1715323614.png" alt="image" class="w-12 h-12 rounded-full" />
<div class="block">
<h5 class="text-sm text-gray-900 font-medium mb-0">Harsh p</h5>
<span class="text-sm text-gray-500 font-normal">@harshp11</span>
</div>
</div>
<a href="#" class="py-2.5 px-3 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs hover:bg-indigo-700">Follow</a>
</div>
<div class="py-5 px-5">
<ul class="block space-y-2">
<li class="flex items-center gap-3 text-sm text-gray-900">
<svg class="transition-none" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="transition-none" d="M15.2418 8.76873L10.8252 4.35207M4.34241 8.76873L8.75908 4.35207M6.45829 12.852C6.45829 12.852 7.39746 13.6854 8.12496 13.6854C8.85246 13.6854 9.79163 12.852 9.79163 12.852C9.79163 12.852 10.7308 13.6854 11.4583 13.6854C12.1858 13.6854 13.125 12.852 13.125 12.852M9.08336 4.67705L8.43336 4.02703C8.04169 3.63536 8.04169 3.00207 8.43336 2.6104L9.08336 1.96038C9.47502 1.56871 10.1084 1.56871 10.5 1.96038L11.15 2.6104C11.5417 3.00207 11.5417 3.63536 11.15 4.02703L10.5 4.67705C10.1084 5.06872 9.47502 5.06872 9.08336 4.67705ZM16 8.52708H16.9166C17.4666 8.52708 17.9166 8.97709 17.9166 9.52709V10.4437C17.9166 10.9937 17.4666 11.4438 16.9166 11.4438H16C15.45 11.4438 15 10.9937 15 10.4437V9.52709C15 8.97709 15.45 8.52708 16 8.52708ZM3.5833 8.52708H2.66662C2.11662 8.52708 1.66663 8.97709 1.66663 9.52709V10.4437C1.66663 10.9937 2.11662 11.4438 2.66662 11.4438H3.5833C4.1333 11.4438 4.58329 10.9937 4.58329 10.4437V9.52709C4.58329 8.97709 4.1333 8.52708 3.5833 8.52708ZM6.45829 12.7927C6.45829 12.7927 6.45829 14.4984 6.45829 16.1854C6.45829 16.971 6.45829 17.3639 6.70237 17.608C6.94645 17.852 7.33928 17.852 8.12496 17.852H11.4583C12.244 17.852 12.6368 17.852 12.8809 17.608C13.125 17.3639 13.125 16.971 13.125 16.1854C13.125 14.4984 13.125 12.7927 13.125 12.7927L9.79163 7.85203L6.45829 12.7927Z" stroke="#9CA3AF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
</svg> Product designer
</li>
<li class="flex items-center gap-3 text-sm text-indigo-600">
<svg class="transition-none" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="transition-none" d="M16.6667 14.1667C15.7462 14.1667 15 13.4205 15 12.5V10C15 9.07953 15.7462 8.33333 16.6667 8.33333C17.5872 8.33333 18.3334 9.07953 18.3334 10V12.5C18.3334 13.4205 17.5872 14.1667 16.6667 14.1667ZM16.6667 14.1667V18.3333M8.33337 7.5H5.00004M8.33337 10.8333H5.00004M6.66671 18.3333L6.66671 15M0.833374 18.3333H19.1667M11.6667 18.3333V6.5C11.6667 4.61438 11.6667 3.67157 11.0809 3.08579C10.4951 2.5 9.55232 2.5 7.66671 2.5H5.66671C3.78109 2.5 2.83828 2.5 2.25249 3.08579C1.66671 3.67157 1.66671 4.61438 1.66671 6.5V18.3333H11.6667Z" stroke="#9CA3AF" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<a href="#">pagedone.io</a>
</li>
</ul>
</div>
</div>
</div>Popover with footer
This will provide a set of large textual information inside the popover when the user hovers on the button.It will disaply separate footer on bottom.
<div class="inline-block">
<button class="py-2.5 px-5 text-xs bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" href="#" data-tooltip-target="popover-footer"> Popover footer </button>
<div class="w-80 inline-block absolute mb-2 bottom-full left-1/2 -translate-x-1/2 z-10 bg-white rounded-xl shadow-md text-left invisible" role="tooltip" id="popover-footer">
<div class="p-5 border-b border-gray-200 flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="https://pagedone.io/asset/uploads/1715323614.png" alt="image" class="w-12 h-12 rounded-full">
<div class="block">
<h5 class="text-sm text-gray-900 font-medium mb-0">Harsh p</h5>
<span class="text-sm text-gray-500 font-normal">@harshp11</span>
</div>
</div>
<a href="#" class="py-2.5 px-3 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs hover:bg-indigo-700">Follow</a>
</div>
<div class="py-5 px-5">
<ul class="block space-y-2">
<li class="flex items-center gap-3 text-sm text-gray-900">
<svg class="transition-none" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="transition-none" d="M15.2418 8.76873L10.8252 4.35207M4.34241 8.76873L8.75908 4.35207M6.45829 12.852C6.45829 12.852 7.39746 13.6854 8.12496 13.6854C8.85246 13.6854 9.79163 12.852 9.79163 12.852C9.79163 12.852 10.7308 13.6854 11.4583 13.6854C12.1858 13.6854 13.125 12.852 13.125 12.852M9.08336 4.67705L8.43336 4.02703C8.04169 3.63536 8.04169 3.00207 8.43336 2.6104L9.08336 1.96038C9.47502 1.56871 10.1084 1.56871 10.5 1.96038L11.15 2.6104C11.5417 3.00207 11.5417 3.63536 11.15 4.02703L10.5 4.67705C10.1084 5.06872 9.47502 5.06872 9.08336 4.67705ZM16 8.52708H16.9166C17.4666 8.52708 17.9166 8.97709 17.9166 9.52709V10.4437C17.9166 10.9937 17.4666 11.4438 16.9166 11.4438H16C15.45 11.4438 15 10.9937 15 10.4437V9.52709C15 8.97709 15.45 8.52708 16 8.52708ZM3.5833 8.52708H2.66662C2.11662 8.52708 1.66663 8.97709 1.66663 9.52709V10.4437C1.66663 10.9937 2.11662 11.4438 2.66662 11.4438H3.5833C4.1333 11.4438 4.58329 10.9937 4.58329 10.4437V9.52709C4.58329 8.97709 4.1333 8.52708 3.5833 8.52708ZM6.45829 12.7927C6.45829 12.7927 6.45829 14.4984 6.45829 16.1854C6.45829 16.971 6.45829 17.3639 6.70237 17.608C6.94645 17.852 7.33928 17.852 8.12496 17.852H11.4583C12.244 17.852 12.6368 17.852 12.8809 17.608C13.125 17.3639 13.125 16.971 13.125 16.1854C13.125 14.4984 13.125 12.7927 13.125 12.7927L9.79163 7.85203L6.45829 12.7927Z" stroke="#9CA3AF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> Product designer
</li>
<li class="flex items-center gap-3 text-sm text-indigo-600">
<svg class="transition-none" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="transition-none" d="M16.6667 14.1667C15.7462 14.1667 15 13.4205 15 12.5V10C15 9.07953 15.7462 8.33333 16.6667 8.33333C17.5872 8.33333 18.3334 9.07953 18.3334 10V12.5C18.3334 13.4205 17.5872 14.1667 16.6667 14.1667ZM16.6667 14.1667V18.3333M8.33337 7.5H5.00004M8.33337 10.8333H5.00004M6.66671 18.3333L6.66671 15M0.833374 18.3333H19.1667M11.6667 18.3333V6.5C11.6667 4.61438 11.6667 3.67157 11.0809 3.08579C10.4951 2.5 9.55232 2.5 7.66671 2.5H5.66671C3.78109 2.5 2.83828 2.5 2.25249 3.08579C1.66671 3.67157 1.66671 4.61438 1.66671 6.5V18.3333H11.6667Z" stroke="#9CA3AF" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<a href="#">pagedone.io</a>
</li>
</ul>
</div>
<div class="py-4 px-5 border-t border-gray-100 flex items-center gap-7">
<div class="text-sm flex items-center gap-2 font-medium">3120 <span class="text-gray-500 font-normal">Followers</span>
</div>
<div class="text-sm flex items-center gap-2 font-medium">2820 <span class="text-gray-500 font-normal">Following</span>
</div>
</div>
</div>
</div>Popover with placement
By using data-tooltip-target="{top|right|bottom"left}" and css styles you can add placement of popover components.
Popover Title
Popover with supporting text
Popover Title
Popover with supporting text
Popover Title
Popover with supporting text
Popover Title
Popover with supporting text
<!-- Show tooltip on top -->
<div class="relative inline-block">
<button class="py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-tooltip-target="top-tooltip"> Popover top </button>
<div class="absolute bottom-full invisible left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded-xl bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]" role="tooltip" id="top-tooltip">
<span class="absolute -bottom-1.5 left-1/2 -z-10 h-3 w-3 -translate-x-1/2 rotate-45 bg-white"></span>
<h5 class="mb-1 text-sm text-gray-900 font-medium text-left">Popover Title</h5>
<p class="text-sm text-gray-600 font-normal">Popover with supporting text</p>
</div>
</div>
<!-- Show tooltip on bottom -->
<div class="relative inline-block">
<button class="py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-tooltip-target="bottom-tooltip"> Popover bottom </button>
<div class="absolute top-full invisible left-1/2 z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded-xl bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_-12px_30px_-4px_rgba(16,24,40,0.08)]" role="tooltip" id="bottom-tooltip">
<span class="absolute -top-1.5 left-1/2 -z-10 h-3 w-3 -translate-x-1/2 rotate-45 bg-white"></span>
<h5 class="mb-1 text-sm text-gray-900 font-medium text-left">Popover Title</h5>
<p class="text-sm text-gray-600 font-normal">Popover with supporting text</p>
</div>
</div>
<!-- Show tooltip on left -->
<div class="relative inline-block">
<button class="py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-tooltip-target="left-tooltip"> Popover on left </button>
<div class="absolute right-full invisible top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded-xl bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[12px_0px_30px_-4px_rgba(16,24,40,0.08)]" role="tooltip" id="left-tooltip">
<span class="absolute -right-1.5 top-1/2 -z-10 h-3 w-3 -translate-y-1/2 rotate-45 rounded-sm bg-white"></span>
<h5 class="mb-1 text-sm text-gray-900 font-medium text-left">Popover Title</h5>
<p class="text-sm text-gray-600 font-normal">Popover with supporting text</p>
</div>
</div>
<!-- Show tooltip on right -->
<div class="relative inline-block">
<button class="py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-tooltip-target="right-tooltip"> Popover on right </button>
<div class="absolute left-full invisible top-1/2 z-20 ml-3 -translate-y-1/2 whitespace-nowrap rounded-xl bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[-12px_0px_30px_-4px_rgba(16,24,40,0.08)]" role="tooltip" id="right-tooltip">
<span class="absolute -left-1.5 top-1/2 -z-10 h-3 w-3 -translate-y-1/2 rotate-45 bg-white"></span>
<h5 class="mb-1 text-sm text-gray-900 font-medium text-left">Popover Title</h5>
<p class="text-sm text-gray-600 font-normal">Popover with supporting text</p>
</div>
</div>