Tailwind CSS Tooltip
Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element
Flowbite allows you to use the Tailwind CSS tooltip component to show extra information when hovering or focusing over an element in multiple positions, styles, and animations.
Before continuing, make sure that you have the Flowbite JavaScript file included in your project in order to make the tooltip component work.
Using tooltips
To get started with using tooltips all you need to do is add
the
data-tooltip-target="{elementId}" data
attribute to an element where elementId is the id
of the tooltip component. In the following example you can see
the button that will trigger the
tooltip-default element to be shown when hovered
or focused.
<button data-tooltip-target="tooltip-default" type="button" class="text-white bg-gradient-to-br from-pink-500 to-voilet-500 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 text-center inline-flex items-center shadow-md shadow-gray-300 hover:scale-[1.02] transition-transform">Default tooltip</button>
<div id="tooltip-default" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
Tooltip content
<div class="tooltip-arrow" data-popper-arrow></div>
</div>Tooltip styles
You can use choose between dark and light version styles for
the tooltip component by changing the utility classes from
Tailwind CSS and by applying the
data-tooltip-style="{light|dark}" data
attribute.
<!-- Light style tooltip -->
<button data-tooltip-target="tooltip-light" data-tooltip-style="light" type="button" class="text-white bg-gradient-to-br from-pink-500 to-voilet-500 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 text-center inline-flex items-center shadow-md shadow-gray-300 hover:scale-[1.02] transition-transform">Light tooltip</button>
<div id="tooltip-light" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 tooltip">
Tooltip content
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<!-- Dark style tooltip -->
<button data-tooltip-target="tooltip-dark" type="button" class="text-white bg-gradient-to-br from-pink-500 to-voilet-500 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 text-center inline-flex items-center shadow-md shadow-gray-300 hover:scale-[1.02] transition-transform">Dark tooltip</button>
<div id="tooltip-dark" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Tooltip content
<div class="tooltip-arrow" data-popper-arrow></div>
</div>Placement
The positioning of the tooltip element relative to the
triggering element (eg. button, link) can be set using the
data-tooltip-placement="{top|right|bottom"left}"
data attribute.
<!-- Show tooltip on top -->
<button data-tooltip-target="tooltip-top" data-tooltip-placement="top" type="button" class="md:mb-0 text-white bg-gradient-to-br from-pink-500 to-voilet-500 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 text-center inline-flex items-center shadow-md shadow-gray-300 hover:scale-[1.02] transition-transform">Tooltip top</button>
<div id="tooltip-top" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Tooltip on top
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<!-- Show tooltip on right -->
<button data-tooltip-target="tooltip-right" data-tooltip-placement="right" type="button" class="md:mb-0 text-white bg-gradient-to-br from-pink-500 to-voilet-500 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 text-center inline-flex items-center shadow-md shadow-gray-300 hover:scale-[1.02] transition-transform">Tooltip right</button>
<div id="tooltip-right" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Tooltip on right
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<!-- Show tooltip on bottom -->
<button data-tooltip-target="tooltip-bottom" data-tooltip-placement="bottom" type="button" class="md:mb-0 text-white bg-gradient-to-br from-pink-500 to-voilet-500 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 text-center inline-flex items-center shadow-md shadow-gray-300 hover:scale-[1.02] transition-transform">Tooltip bottom</button>
<div id="tooltip-bottom" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Tooltip on bottom
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<!-- Show tooltip on left -->
<button data-tooltip-target="tooltip-left" data-tooltip-placement="left" type="button" class="md:mb-0 text-white bg-gradient-to-br from-pink-500 to-voilet-500 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 text-center inline-flex items-center shadow-md shadow-gray-300 hover:scale-[1.02] transition-transform">Tooltip left</button>
<div id="tooltip-left" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Tooltip on left
<div class="tooltip-arrow" data-popper-arrow></div>
</div>If you want more details about Tooltips component, please check the official docs on Flowbite.