Tailwind CSS Popover

Use our Tailwind CSS Popover to portray people or objects. It can be used as a visual identifier for a user profile on your website.

See below our popover components examples.

<button
  class="button button-pink"
  data-target="popover"
  type="button"
  data-ripple-light="true"
>
  Popover top
</button>
<div class="popover hidden" data-attribute="popover" data-placement="top">
  <div class="popover-title">Gray popover title</div>
  <div class="popover-body p-3">
    And here's some amazing content. It's very engaging. Right?
  </div>
  <div class="arrow" data-popper-arrow></div>
</div>

Popover position

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

<button
  class="button button-pink"
  data-target="popover"
  type="button"
  data-ripple-light="true"
>
  Popover top
</button>
<div class="popover hidden" data-attribute="popover" data-placement="top">
  <div class="popover-title">Tailwind popover title</div>
  <div class="popover-body p-3">
    And here's some amazing content. It's very engaging. Right?
  </div>
  <div class="arrow" data-popper-arrow></div>
</div>
<button
  class="button button-pink"
  data-target="popover"
  type="button"
  data-ripple-light="true"
>
  Popover right
</button>
<div class="popover hidden" data-attribute="popover" data-placement="right">
  <div class="popover-title">Tailwind popover title</div>
  <div class="popover-body p-3">
    And here's some amazing content. It's very engaging. Right?
  </div>
  <div class="arrow" data-popper-arrow></div>
</div>
<button
  class="button button-pink"
  data-target="popover"
  type="button"
  data-ripple-light="true"
>
  Popover bottom
</button>
<div class="popover hidden" data-attribute="popover" data-placement="bottom">
  <div class="popover-title">Tailwind popover title</div>
  <div class="popover-body p-3">
    And here's some amazing content. It's very engaging. Right?
  </div>
  <div class="arrow" data-popper-arrow></div>
</div>
<button
  class="button button-pink"
  data-target="popover"
  type="button"
  data-ripple-light="true"
>
  Popover left
</button>
<div class="popover hidden" data-attribute="popover" data-placement="left">
  <div class="popover-title">Tailwind popover title</div>
  <div class="popover-body p-3">
    And here's some amazing content. It's very engaging. Right?
  </div>
  <div class="arrow" data-popper-arrow></div>
</div>

Required Scrips

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

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/popover.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/popover.js"></script>
 
<!-- popper.js cdn link -->
<script src="https://unpkg.com/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>

pagination

progress bar

Edit this page on Github