MAMIX - Tailwind Admin Template

Default Popovers


    <div class="ti-btn-list">
      <div class="hs-tooltip ti-main-tooltip [--trigger:click]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-primary" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 !rounded-t-md !py-2  !px-4 text-defaulttextcolor border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
        </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-primary" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 !rounded-t-md !py-2  !px-4 text-defaulttextcolor border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:bottom]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-primary" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 !rounded-t-md !py-2  !px-4 text-defaulttextcolor border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:left]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-primary" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 !rounded-t-md !py-2  !px-4 text-defaulttextcolor border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
        </div>
    </div>

Colored Headers


    <div class="ti-btn-list">
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-primary" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-primary !rounded-t-md !py-2  !px-4 text-white border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor  !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-secondary" href="javascript:void(0);">Header Secondary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-secondary !py-2 !rounded-t-md !px-4 text-white border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Secondary Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:bottom]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-info" href="javascript:void(0);">Header Info
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-info !py-2 !px-4 !rounded-t-md text-white border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Info Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:left]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-warning" href="javascript:void(0);">Header warning
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-warning !py-2 !px-4 !rounded-t-md text-white border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With warning Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-success" href="javascript:void(0);">Header succuss
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-success !py-2 !px-4 text-white !rounded-t-md border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With succuss Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-outline-danger" href="javascript:void(0);">Header danger
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-danger !py-2 !px-4 text-white border-defaultborder !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With danger Header</p>
              </div>
            </a>
      </div>
    </div>

Colored Popovers


    <div class="ti-btn-list">
      <div class="hs-tooltip ti-main-tooltip  [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-primary" href="javascript:void(0);">Primary
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-primary !z-[1000] !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-white/10 !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Primary Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With primary background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-secondary" href="javascript:void(0);">Secondary
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-secondary !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-white/10 !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Secondary Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With secondary background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-info" href="javascript:void(0);">Info
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-secondary  !p-0 !max-w-[276px]  !border-white/10" role="tooltip">
                  <div  class="!border-b dark:border-white/10 !border-solid !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Info Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With info background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-warning" href="javascript:void(0);">Warning
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-warning  !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b dark:border-white/10 !border-solid !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Warning Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With warning background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-success" href="javascript:void(0);">Success
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-success  !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b dark:border-white/10 !border-solid !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Success Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With success background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-danger" href="javascript:void(0);">Danger
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-danger  !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b dark:border-white/10 !border-solid !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Danger Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With danger background</p>
              </div>
            </a>
      </div>
    </div>

Light Popovers


    <div class="ti-btn-list">
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top] ">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-soft-primary" href="javascript:void(0);">Primary
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-primary/10 !z-[1000] !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-primary !border-primary/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-primary !text-[0.8rem] !py-4 !px-4 text-start">Popover With primary background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-soft-secondary" href="javascript:void(0);">Secondary
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-secondary/10 !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-secondary !border-secondary/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-secondary !text-[0.8rem] !py-4 !px-4 text-start">Popover With secondary background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-soft-info" href="javascript:void(0);">Info
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-info/10  !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-info !border-info/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-info !text-[0.8rem] !py-4 !px-4 text-start">Popover With info background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-soft-warning" href="javascript:void(0);">Warning
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-warning/10  !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-warning !border-warning/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-warning !text-[0.8rem] !py-4 !px-4 text-start">Popover With warning background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-soft-success" href="javascript:void(0);">Success
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-success/10  !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-success !border-success/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-success !text-[0.8rem] !py-4 !px-4 text-start">Popover With success background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-soft-danger" href="javascript:void(0);">danger
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-danger/10  !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-danger !border-danger/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-danger !text-[0.8rem] !py-4 !px-4 text-start">Popover With danger background</p>
              </div>
            </a>
      </div>
    </div>

Disabled Popover

<div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
    <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave  ti-btn-primary opacity-60" href="javascript:void(0);">
        Disabled button
      <div class="hs-tooltip-content ti-main-tooltip-content" role="tooltip">
       Diabled Popover
      </div>
    </a>
  </div>

Icon Popovers


    <div class="hs-tooltip ti-main-tooltip me-6 !max-w-[276px] [--trigger:click] [--placement:top]">
      <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:void(0);">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg-primary" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
        <div class="hs-tooltip-content ti-main-tooltip-content !py-4 !px-4 !bg-primary !text-white" role="tooltip">
         <p>The Icon Popover</p>
        </div>
      </a>
    </div>
    <div class="hs-tooltip ti-main-tooltip !max-w-[276px] [--trigger:click] [--placement:left]">
    <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:void(0);">
      <svg xmlns="http://www.w3.org/2000/svg" class="fill-secondary" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
      <div class="hs-tooltip-content ti-main-tooltip-content !bg-secondary !text-white !py-4 !px-4" role="tooltip">
          <p>The Icon Popover</p>
    </div>
    </a>
    </div>

Popover With Four Directions


<div class="flex justify-center gap-4">
<div class="hs-tooltip ti-main-tooltip [--trigger:click]">
    <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
        <span
            class="w-10 h-10 ti-btn btn-wave  p-0 transition-none focus:outline-none bg-gray-50 border-gray-200 text-gray-600 hover:bg-primary/30 hover:border-primary hover:text-primary dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
            <i> class="ri-arrow-up-s-line"></i>
        </span>
        <div> class="hs-tooltip-content ti-main-tooltip-content" role="tooltip" data-popper-placement="top"
            style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(327px, -338px);">
            Top popover
        </div>
    </a>
</div>

<div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:left]">
    <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
        <span
            class="w-10 h-10 ti-btn btn-wave  p-0 transition-none focus:outline-none bg-gray-50 border-gray-200 text-gray-600 hover:bg-primary/30 hover:border-primary hover:text-primary dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
            <i> class="ri-arrow-left-s-line"></i>
        </span>
        <div> class="hs-tooltip-content ti-main-tooltip-content hidden" role="tooltip"
            style="position: fixed; inset: 0px 0px auto auto; margin: 0px; transform: translate(-1501px, 469px);"
            data-popper-placement="left">
            Left popover
        </div>
    </a>
</div>

<div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
    <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
        <span
            class="w-10 h-10 ti-btn btn-wave  p-0 transition-none focus:outline-none bg-gray-50 border-gray-200 text-gray-600 hover:bg-primary/30 hover:border-primary hover:text-primary dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
            <i> class="ri-arrow-right-s-line"></i>
        </span>
        <div> class="hs-tooltip-content ti-main-tooltip-content hidden" role="tooltip"
            style="position: fixed; inset: 0px auto auto 0px; margin: 0px; transform: translate(533px, 469px);"
            data-popper-placement="right">
            Right popover
        </div>
    </a>
</div>

<div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:bottom]">
    <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
        <span
            class="w-10 h-10 ti-btn btn-wave  p-0 transition-none focus:outline-none bg-gray-50 border-gray-200 text-gray-600 hover:bg-primary/30 hover:border-primary hover:text-primary dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
            <i> class="ri-arrow-down-s-line"></i>
        </span>
        <div> class="hs-tooltip-content ti-main-tooltip-content hidden" role="tooltip"
            style="position: fixed; inset: 0px auto auto 0px; margin: 0px; transform: translate(496px, 521px);"
            data-popper-placement="bottom">
            Bottom popover
        </div>
    </a>
</div>

</div>

Popover With Focus event


<div class="flex justify-center">
<div class="hs-tooltip ti-main-tooltip [--trigger:focus]">
  <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
    <span class="w-10 h-10 ti-btn btn-wave  p-0 transition-none focus:outline-none bg-gray-50 border-gray-200 text-gray-600 hover:bg-primary/30 hover:border-primary hover:text-primary dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
      <i class="ri-arrow-up-s-line"></i>
    </span>
    <div class="hs-tooltip-content ti-main-tooltip-content hidden" role="tooltip" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(835px, -490px);" data-popper-placement="top">
      Focus me
    </div>
  </a>
</div>
</div>

Popover With Content


  <div class="flex justify-center">
  <div class="hs-tooltip ti-main-tooltip [--trigger:click]">
    <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
      <span class="w-10 h-10 ti-btn btn-wave  p-0 transition-none focus:outline-none bg-gray-50 border-gray-200 text-gray-600 hover:bg-primary/30 hover:border-primary hover:text-primary dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
        <i> class="ri-arrow-up-s-line"></i>
      </span>
      <div class="hs-tooltip-content ti-main-tooltip-content !p-0 max-w-xs border-gray-200 text-start rounded-sm hidden" role="tooltip" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1132px, -490px);" data-popper-placement="top">
        <span> class="pt-3 px-4 block text-lg font-bold text-gray-800 dark:text-white">Overview</span>
        <div class="py-2 px-3 text-sm text-gray-600 dark:text-white/70">
          <img class="rounded-sm mb-3" src="../assets/images/media/media-28.jpg" alt="Image Description">
          <p>This is a popover body with supporting text below as a natural lead-in to additional content.</p>
          <dl class="mt-3">
            <dt> class="font-bold pt-3 first:pt-0 dark:text-white">Assigned to:</dt>
            <dd> class="m-0 text-gray-600 dark:text-white/70">Mark Welson</dd>
            <dt> class="font-bold pt-3 first:pt-0 dark:text-white">Due:</dt>
            <dd> class="m-0 text-gray-600 dark:text-white/70">December 21, 2021</dd>
          </dl>
        </div>
      </div>
    </a>
  </div>
</div>

Popover With Hover event


    <div class="flex justify-center">
    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
      <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
        <span class="w-10 h-10 ti-btn btn-wave  p-0 transition-none focus:outline-none bg-gray-50 border-gray-200 text-gray-600 hover:bg-primary/30 hover:border-primary hover:text-primary dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
          <i> class="ri-arrow-up-s-line"></i>
        </span>
        <div> class="hs-tooltip-content ti-main-tooltip-content" role="tooltip" style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(427px, -319px);" data-popper-placement="top">
          Hover me
        </div>
      </a>
    </div>
  </div>

Review popover


<!-- Popover -->
<div class="hs-tooltip ti-main-tooltip [--trigger:click]">
  <div class="hs-tooltip-toggle ti-main-tooltip-toggle">
      <button type="button"
          class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-primary hover:text-primary/80 disabled:opacity-50 disabled:pointer-events-none dark:text-primary dark:hover:text-primary/80 dark:focus:outline-none dark:focus:ring-0 dark:shadow-none dark:focus:ring-primary">
          Preline review
          <i class="ri-arrow-up-s-line"></i>
      </button>

      <div class="hs-tooltip-content ti-main-tooltip-content max-w-xs w-full hidden" role="tooltip"
          style="position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(1433px, -490px);"
          data-popper-placement="top">
          <div class="p-4">
              <!-- Header -->
              <div class="mb-3 flex justify-between items-center gap-x-3">
                  <div class="flex items-center gap-x-2">
                      <h4 class="font-semibold text-gray-800 dark:text-white">
                          5.0
                      </h4>

                      <!-- Rating -->
                      <div class="flex">
                          <i class="ri-star-fill text-lg text-warning dark:text-warning"></i>
                          <i class="ri-star-fill text-lg text-warning dark:text-warning"></i>
                          <i class="ri-star-fill text-lg text-warning dark:text-warning"></i>
                          <i class="ri-star-fill text-lg text-warning dark:text-warning"></i>
                          <i class="ri-star-fill text-lg text-warning dark:text-warning"></i>
                      </div>
                      <!-- End Rating -->
                  </div>

                  <a class="inline-flex items-center gap-x-1 text-xs text-primary decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-0 dark:focus:shadow-none dark:focus:ring-primary"
                      href="#">
                      See all (4)
                  </a>
              </div>
              <!-- End Header -->

              <div class="mb-3">
                  <!-- Progress -->
                  <div class="flex items-center gap-x-3 whitespace-nowrap">
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">5 star</span>
                      </div>
                      <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-bodybg"
                          role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-yellow-600"
                              style="width: 78%"></div>
                      </div>
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">78%</span>
                      </div>
                  </div>
                  <!-- End Progress -->

                  <!-- Progress -->
                  <div class="flex items-center gap-x-3 whitespace-nowrap">
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">4 star</span>
                      </div>
                      <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-bodybg"
                          role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-yellow-600"
                              style="width: 20%"></div>
                      </div>
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">20%</span>
                      </div>
                  </div>
                  <!-- End Progress -->

                  <!-- Progress -->
                  <div class="flex items-center gap-x-3 whitespace-nowrap">
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">3 star</span>
                      </div>
                      <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-bodybg"
                          role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-yellow-600"
                              style="width: 6%"></div>
                      </div>
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">6%</span>
                      </div>
                  </div>
                  <!-- End Progress -->

                  <!-- Progress -->
                  <div class="flex items-center gap-x-3 whitespace-nowrap">
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">2 star</span>
                      </div>
                      <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-bodybg"
                          role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-yellow-600"
                              style="width: 2%"></div>
                      </div>
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">2%</span>
                      </div>
                  </div>
                  <!-- End Progress -->

                  <!-- Progress -->
                  <div class="flex items-center gap-x-3 whitespace-nowrap">
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">1 star</span>
                      </div>
                      <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-bodybg"
                          role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-yellow-600"
                              style="width: 0%"></div>
                      </div>
                      <div class="w-10 text-end">
                          <span class="text-sm text-gray-800 dark:text-white">0%</span>
                      </div>
                  </div>
                  <!-- End Progress -->
              </div>

              <a class="inline-flex items-center gap-x-1 text-xs text-gray-600 decoration-2 hover:underline dark:text-white/70 dark:focus:outline-none dark:focus:ring-0 dark:shadow-none dark:focus:ring-gray-400"
                  href="#">
                  How reviews and ratings work
                  <i class="ri-arrow-right-s-line"></i>
              </a>
          </div>
      </div>
  </div>
</div>
<!-- End Popover -->

User popover example


<!-- User -->
<div class="hs-tooltip inline-block [--trigger:hover] sm:[--placement:right]">
  <div class="hs-tooltip-toggle max-w-xs p-3 flex items-center gap-x-3 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-bodybg dark:border-white/10">
    <img class="inline-block size-9 rounded-full" src="../assets/images/faces/1.jpg" alt="Image Description">
    <!-- User Content -->
    <div class="grow">
      <h4> class="font-semibold text-sm text-gray-800 dark:text-white">
        Amanda Harvey
      </h4>
      <p> class="text-sm text-gray-800 md:text-gray-500 dark:text-white md:dark:text-white/70">
        amanda@email.com
      </p>
    </div>
    <!-- End User Content -->
    <!-- Popover Content -->
    <div class="hs-tooltip-content overflow-hidden ti-main-tooltip-content !p-0 max-w-xs w-full after:absolute after:top-0 after:-start-4 after:w-4 after:h-full hidden" role="tooltip" style="position: fixed; inset: 0px auto auto 0px; margin: 0px; transform: translate(929px, 563px);" data-popper-placement="right">
      <!-- Header -->
      <div class="py-3 px-4 border-b border-gray-200 dark:border-white/10">
        <div class="flex items-center gap-x-3">
          <img class="flex-shrink-0 inline-block size-10 rounded-full ring-2 ring-white dark:ring-bodybg" src="../assets/images/faces/1.jpg" alt="Image Description">
          <div class="grow">
            <h4 class="font-semibold text-gray-800 dark:text-white">
              Amanda Harvey
              <span> class="ms-0.5 inline-flex items-center align-middle gap-x-1.5 py-0.5 px-1.5 rounded-md text-[11px] font-medium bg-gray-800 text-white dark:bg-bodybg dark:text-white">
                PRO
              </span>
            </h4>
            <p> class="text-sm text-gray-500 dark:text-white/70">
              Storyteller
            </p>
          </div>
        </div>
      </div>
      <!-- End Header -->
      <!-- List -->
      <ul class="py-3 px-4 space-y-1">
        <li>
          <div class="inline-flex items-center gap-x-3 text-sm text-gray-800 dark:text-white">
            <i> class="ri-building-line text-gray-600 dark:text-white/70"></i>
            Pixeel Ltd.
          </div>
        </li>
        <li>
          <div class="inline-flex items-center gap-x-3 text-sm text-gray-800 dark:text-white">
            <i> class="ri-smartphone-line text-gray-600 dark:text-white/70"></i>
            (892) 312-5483
          </div>
        </li>
        <li>
          <div class="inline-flex items-center gap-x-3 text-sm text-gray-800 dark:text-white">
            <i> class="ri-mail-line text-gray-600 dark:text-white/70"></i>
            amanda@email.com
          </div>
        </li>
      </ul>
      <!-- End List -->
      <!-- Footer -->
      <div class="py-2 px-4 flex justify-between items-center bg-gray-100 dark:bg-bodybg">
        <a class="inline-flex items-center gap-x-1.5 text-xs text-gray-500 hover:text-primary disabled:opacity-50 disabled:pointer-events-none dark:text-white/70 dark:hover:text-white dark:focus:outline-none" href="javascript:void(0);">
          <i> class="ri-flag-line"></i>
          Flag
        </a>
        <button> type="button" class="py-1.5 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border border-transparent bg-primary text-white hover:bg-primary/80 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-primary">
          Follow
        </button>
      </div>
      <!-- End Footer -->
    </div>
    <!-- End Popover Content -->
  </div>
</div>
<!-- End User -->

Switcher

Popover Top

Popover Right

Popover Bottom

Popover Left

Color Header

Color Header

Color Header

Color Header

Color Header

Color Header

Primary Color background

Secondary Color background

Info Color background

Warning Color background

Success Color background

Danger Color background

Color background

Color background

Color background

Color background

Color background

Color background

5.0

Amanda Harvey

Amanda Harvey PRO

Switcher

$75$99

$120$149

$30$49

$70$129

$200$249

Popovers

Popover Top

Popover Right

Popover Bottom

Popover Left

Color Header

Color Header

Color Header

Color Header

Color Header

Color Header

Primary Color background

Secondary Color background

Info Color background

Warning Color background

Success Color background

Danger Color background

Color background

Color background

Color background

Color background

Color background

Color background

5.0

Amanda Harvey

Amanda Harvey PRO