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 component examples.


You can initialize a new popover by adding the data-popover-target="{popoverName}" data attribute to the trigger element and the data-popover="{popoverName}" to the element that you want to use as the popover.

This is a very beautiful popover, show some love.

Popover Placement

You can change the position of the popover relative to it's trigger element by adding the data-popover-placement="{top}" data attribute to the popover element by default it set's to top.
Check the placement values for popover here.

This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.
This is a very beautiful popover, show some love.

Custom Popover Animation

You can modify the open/close state animation for popover by adding the data-popover-mount="{opacity-100}", data-popover-unmount="{opacity-0}" and data-popover-transition="{transition-opacity}" data attributes to the popover element. You can pass tailwind css classnames for those data attributes for animation the popover.
Check more about animation data attributes for popover here.

This is a very beautiful popover, show some love.

Profile Info Popover

candice wu

Candice Wu @canwu

Frontend Developer • Major interest in Web Development: motivated to achieve measurable results, to deepen my knowledge and improve my skills.

United Kingdom

Material Tailwind

Popover with Description

@material-tailwind is an easy-to-use components library htmlFor Tailwind CSS and Material Design.

TypeScript

1,480

Veritied


Popover Trigger Data Attributes

The following data attributes are available for popover trigger element.

AttributeDescription
data-popover-targetSet the popover target element, it should be the same as the data-popover data attribute.
data-popover-nestedSet it to true if you want to use one popover inside another popover.

Popover Data Attributes

The following data attributes are available for popover element.

AttributeDescriptionDefault
data-popoverSet the name of the popover and reference it to the
popover trigger element.
data-popover-offsetSet the offset between the popover and the popover trigger element.5
data-popover-placementSet the position of the popover relative to it's trigger element.top
data-popover-mountSet the classnaes that should be used when the
popover is visible.
opacity-1
data-popover-unmountSet the classnaes that should be used when the
popover is hidden.
opacity-0
pointer-events-none
data-popover-transitionSet the classnaes that should be used for
transition of the popover.
transition-opacity
duration-300

Required Scrips

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

<!-- from node_modules -->
<script
  type="module"
  src="node_modules/@material-tailwind/[email protected]/scripts/popover.js"
></script>
 
<!-- from cdn -->
<script
  type="module"
  src="https://unpkg.com/@material-tailwind/[email protected]/scripts/popover.js"
></script>
Edit this page on Github