Tailwind CSS Tooltip

Customise your web projects with an easy-to-use and responsive Tailwind CSS tooltip!

A tooltip is a small pop-up element that appears while the user moves the mouse pointer over an element. Use it when you want to specify extra information about something when the user moves the mouse pointer over an element.

See below our example that will help you create a simple tooltip for your project.


<button
  class="button button-pink"
  data-target="tooltip"
  aria-describedby="tooltip"
  data-ripple-light="true"
>
  Tooltip top
</button>
<div class="tooltip" role="tooltip" data-placement="top">
  My tooltip
  <div class="arrow" data-popper-arrow></div>
</div>

Tooltip position

You can simply change the tooltip position by changing the data-placement=" " attribute with the following values: top, right, bottom, left.

<button
  class="button button-pink"
  data-target="tooltip"
  aria-describedby="tooltip"
  data-ripple-light="true"
>
  Tooltip top
</button>
<div class="tooltip" role="tooltip" data-placement="top">
  Top tooltip
  <div class="arrow" data-popper-arrow></div>
</div>
<button
  class="button button-pink"
  data-target="tooltip"
  aria-describedby="tooltip"
  data-ripple-light="true"
>
  Tooltip right
</button>
<div class="tooltip" role="tooltip" data-placement="right">
  Right tooltip
  <div class="arrow" data-popper-arrow></div>
</div>
<button
  class="button button-pink"
  data-target="tooltip"
  aria-describedby="tooltip"
  data-ripple-light="true"
>
  Tooltip bottom
</button>
<div class="tooltip" role="tooltip" data-placement="bottom">
  Bottom tooltip
  <div class="arrow" data-popper-arrow></div>
</div>
<button
  class="button button-pink"
  data-target="tooltip"
  aria-describedby="tooltip"
  data-ripple-light="true"
>
  Tooltip left
</button>
<div class="tooltip" role="tooltip" data-placement="left">
  Left tooltip
  <div class="arrow" data-popper-arrow></div>
</div>

Required Scrips

The tooltip component needs some required script files to work, you just need to add the below script file to the bottom of your html file.

<script src="node_modules/@material-tailwind/html/scripts/tooltip.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/[email protected]/scripts/tooltip.js"></script>
 
<!-- popper.js cdn link -->
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
Edit this page on Github