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>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>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/[email protected]/scripts/popover.js"></script>
<!-- popper.js cdn link -->
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js"></script>