Tailwind CSS Popover

Use our Tailwind CSS Popover to display additional information, context, or controls related to an item or action. Popovers can be triggered by various user interactions such as clicking on a button, hovering over a text link, or focusing on an input field.

Popovers are useful for creating a cleaner, less cluttered user interface by hiding secondary information or options until they're needed. They're often used for tooltips, dropdown menus, options menus, form validation messages, and more.

See below our popover component examples created with HTML and styled with Tailwind CSS.

Popover 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.

Default Popover

The content inside the popover is simple text, styled with font-sans text-sm font-normal and colored with text-blue-gray-500. It shows basic usage for displaying additional information or actions related to the button.

This is a very beautiful popover, show some love.

<button data-ripple-light="true" data-popover-target="popover"
  class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
  Show Popover
</button>
<div data-popover="popover"
  class="absolute p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
  This is a very beautiful popover, show some love.
</div>

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.

  <div class="flex gap-3 mb-3">
    <button data-ripple-light="true" data-popover-target="popover-top"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-top" data-popover-placement="top"
      class="absolute z-50 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
    <button data-ripple-light="true" data-popover-target="popover-top-start"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-top-start" data-popover-placement="top-start"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
    <button data-ripple-light="true" data-popover-target="popover-top-end"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-top-end" data-popover-placement="top-end"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
  </div>
  <div class="flex gap-3 mb-3">
    <button data-ripple-light="true" data-popover-target="popover-right"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-right" data-popover-placement="right"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
    <button data-ripple-light="true" data-popover-target="popover-right-start"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-right-start" data-popover-placement="right-start"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
    <button data-ripple-light="true" data-popover-target="popover-right-end"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-right-end" data-popover-placement="right-end"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
  </div>
  <div class="flex gap-3 mb-3">
    <button data-ripple-light="true" data-popover-target="popover-bottom"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-bottom" data-popover-placement="bottom"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
    <button data-ripple-light="true" data-popover-target="popover-bottom-start"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-bottom-start" data-popover-placement="bottom-start"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
    <button data-ripple-light="true" data-popover-target="popover-bottom-end"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-bottom-end" data-popover-placement="bottom-end"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
  </div>
  <div class="flex gap-3 mb-3">
    <button data-ripple-light="true" data-popover-target="popover-left"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-left" data-popover-placement="left"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
    <button data-ripple-light="true" data-popover-target="popover-left-start"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-left-start" data-popover-placement="left-start"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
    <button data-ripple-light="true" data-popover-target="popover-left-end"
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
      POPOVER
    </button>
    <div data-popover="popover-left-end" data-popover-placement="left-end"
      class="absolute z-10 p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
      This is a very beautiful popover, show some love.
    </div>
  </div>

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 class names for those data attributes for animating the popover.
Check more about animation data attributes for popover here.

This is a very beautiful popover, show some love.

  <button data-ripple-light="true" data-popover-target="popover-animation"
    class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
    POPOVER
  </button>
  <div data-popover="popover-animation" data-popover-mount="opacity-100 scale-100"
    data-popover-unmount="opacity-0 scale-0 pointer-events-none"
    data-popover-transition="transition-all duration-200 origin-bottom"
    class="absolute p-4 font-sans text-sm font-normal break-words whitespace-normal bg-white border rounded-lg shadow-lg w-max border-blue-gray-50 text-blue-gray-500 shadow-blue-gray-500/10 focus:outline-none">
    This is a very beautiful popover, show some love.
  </div>

Popover with Image

This example is used to show more information. It contains an image, headline, description, and link.

 <button data-ripple-dark="true" data-popover-target="popover-with-image"
  class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
  More Info
</button>
 
<div
  class="absolute z-[999] grid w-[28rem] grid-cols-2 overflow-hidden whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white p-0 font-sans text-sm font-normal text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none"
  aria-labelledby=":r3a:-label" aria-describedby="popover-with-image" id="popover-with-image"
  data-popover="popover-with-image" role="dialog">
  <div class="p-4">
    <p class="block mb-2 font-sans text-lg antialiased font-bold text-blue-gray-900">
      Material Tailwind
    </p>
    <p class="block font-sans text-sm antialiased font-normal leading-normal mb-14 text-blue-gray-500">
      Material Tailwind is an easy to use components library for Tailwind
      CSS and Material Design. It features multiple React and HTML
      components, all written with Tailwind CSS classes and Material
      Design guidelines.
    </p>
    <a href="#" class="inline-block -ml-3">
      <button
        class="flex items-center px-4 py-2 font-sans text-xs font-bold text-center text-gray-900 capitalize align-middle transition-all rounded-lg select-none gap-x-2 hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
        type="button">
        Read More
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.25 1.91669L5.33333 6.00002L1.25 10.0834" stroke="#212121" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round"></path>
        </svg>
      </button>
    </a>
  </div>
  <div class="min-h-full !w-full p-3">
    <img
      src="https://images.unsplash.com/photo-1544928147-79a2dbc1f389?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dGVhbSUyMGJ1aWxkaW5nfGVufDB8fDB8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60"
      alt="image" class="object-cover w-full h-full rounded-lg" />
  </div>
</div>

Subscription Popover

Use this versatile popover if you want to let the users subscribe easily.

 <button data-ripple-dark="true" data-popover-target="popover-with-subscription"
  class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
  More Info
</button>
<div
  class="absolute z-[999] w-96 whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white p-4 font-sans text-sm font-normal text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none"
  aria-labelledby="label" aria-describedby="label" id="popover-with-subscription" role="dialog"
  data-popover="popover-with-subscription">
  <h6
    class="block mb-6 font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-blue-gray-900">
    Newsletter Subscription
  </h6>
  <p class="block mb-1 font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
    Your Name
  </p>
  <div class="flex gap-2">
    <div class="relative h-11 w-full min-w-[200px]">
      <input placeholder="name@mail.com"
        class="peer h-full w-full rounded-md border border-blue-gray-200 border-t-transparent !border-t-blue-gray-200 bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:!border-t-gray-900 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50" />
      <label
        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all before:content-none after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all after:content-none peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
    </div>
    <button
      class="flex-shrink-0 select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button">
      Subscribe
    </button>
  </div>
</div>

Profile Info Popover

Check out this component example that showcases how to create an interactive profile information card that appears as a popover. The example includes several UI elements such as an image, a button, textual information, and icons, offering a richer user experience.

Tania Andrew • @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

  <button data-ripple-dark="true" data-popover-target="profile-info-popover"
    class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85]  focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
    Profile Info
  </button>
  <div data-popover="profile-info-popover"
    class="absolute max-w-[24rem] whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white p-4 font-sans text-sm font-normal text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none">
    <div class="flex items-center justify-between gap-4 mb-2">
      <img
        src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
        alt="tania andrew" class="relative inline-block object-cover object-center w-12 h-12 rounded-full" />
      <button
        class="select-none rounded-lg bg-gray-900 py-2 px-3 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
        type="button" data-ripple-light="true">
        Follow
      </button>
    </div>
    <h6
      class="flex items-center gap-2 mb-2 font-sans text-base antialiased font-medium leading-relaxed tracking-normal text-blue-gray-900">
      <span>Tania Andrew</span> •{" "}
      <a class="text-sm text-blue-gray-700" href="#">
        @canwu
      </a>
    </h6>
    <p class="block font-sans text-sm antialiased font-normal leading-normal text-gray-700">
      Frontend Developer • Major interest in Web Development: motivated to
      achieve measurable results, to deepen my knowledge and improve my
      skills.
    </p>
    <div class="flex items-center gap-8 pt-4 mt-6 border-t border-blue-gray-50">
      <p class="flex items-center gap-1 font-sans text-xs antialiased font-normal text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
          aria-hidden="true" class="-mt-0.5 h-3.5 w-3.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"></path>
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"></path>
        </svg>
        United Kingdom
      </p>
      <a href="#" class="flex items-center gap-1 font-sans text-xs antialiased font-normal text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
          aria-hidden="true" class="-mt-0.5 h-3.5 w-3.5">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z">
          </path>
        </svg>
        Material Tailwind
      </a>
    </div>
  </div>

Popover with Description

This popover component is designed to display repository details, incorporating elements such as links, badges, text descriptions, and icons to convey various pieces of information.

@material-tailwind

Public

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

TypeScript

1,480

Veritied

  <button data-ripple-dark="true" data-popover-target="popover-with-description"
    class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
    Repository Details
  </button>
  <div data-popover="popover-with-description"
    class="absolute z-50 max-w-[26rem] whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white p-4 font-sans text-sm font-normal text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none">
    <div class="flex items-center gap-3 mb-2">
      <a href="#"
        class="block font-sans text-base antialiased font-medium leading-relaxed tracking-normal transition-colors text-blue-gray-900 hover:text-blue-500">
        @material-tailwind
      </a>
      <div
        class="relative inline-block px-2 py-1 font-sans text-xs font-medium leading-none tracking-wide text-white capitalize align-baseline bg-gray-900 rounded-full select-none center whitespace-nowrap"
        data-projection-id="2">
        <div class="mt-px">Public</div>
      </div>
    </div>
    <p class="block font-sans text-sm antialiased font-normal leading-normal text-gray-700">
      @material-tailwind is an easy-to-use components library htmlFor
      Tailwind CSS and Material Design.
    </p>
    <div class="flex items-center gap-5 mt-4">
      <div class="flex items-center gap-1">
        <span class="w-3 h-3 bg-blue-700 rounded-full"></span>
        <p class="block font-sans text-xs antialiased font-normal text-gray-700">
          TypeScript
        </p>
      </div>
      <div class="flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
          class="-mt-0.5 h-4 w-4 text-yellow-700">
          <path fill-rule="evenodd"
            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
            clip-rule="evenodd"></path>
        </svg>
        <p class="block font-sans text-xs antialiased font-normal text-gray-700">
          1,480
        </p>
      </div>
      <div class="flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
          class="w-4 h-4 -mt-px text-green-500">
          <path fill-rule="evenodd"
            d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
            clip-rule="evenodd"></path>
        </svg>
        <p class="block font-sans text-xs antialiased font-normal text-gray-700">
          Veritied
        </p>
      </div>
    </div>
  </div>

Popover Trigger Data Attributes

The following data attributes are available for popover trigger element.

Attribute	Description
`data-popover-target`	Set the popover target element, it should be the same as the `data-popover` data attribute.
`data-popover-nested`	Set 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.

Attribute	Description	Default
`data-popover`	Set the name of the popover and reference it to the popover trigger element.
`data-popover-offset`	Set the offset between the popover and the popover trigger element.	5
`data-popover-placement`	Set the position of the popover relative to it's trigger element.	`top`
`data-popover-mount`	Set the classnaes that should be used when the popover is visible.	`opacity-1`
`data-popover-unmount`	Set the classnaes that should be used when the popover is hidden.	`opacity-0` `pointer-events-none`
`data-popover-transition`	Set the classnaes that should be used for transition of the popover.	`transition-opacity` `duration-300`

Required Scripts

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/html@latest/scripts/popover.js"
></script>
 
<!-- from cdn -->
<script
  type="module"
  src="https://unpkg.com/@material-tailwind/html@latest/scripts/popover.js"
></script>