Zynix - Laravel Tailwind Premium Admin & Dashboard Template

5
Cart Items
5 Items
- Puma
  
  $75 $99
  
  Classic tufted leather sofa
  Quantity : 4 x $32
- Puma
  
  $120 $149
  
  Polaroid Medium Camera
  Quantity : 12 x $112
- Puma
  
  $30 $49
  
  Creed Aventus Luxury Perfume
  Quantity : 9 x $64
- Puma
  
  $70 $129
  
  Ethan Allen School Bag
  Quantity : 7 x $230
- Puma
  
  Louis Vuitton Handbag
  Quantity : 5 x $52
  
  $200 $249
Proceed to checkout

Your Cart is Empty
Add some items to make me happy :)
Notifications
15 Unread

Activity Notes Alerts
- Way to go Jack Miller ! 🎉
  
  Congratulations on snagging the Monthly Best Seller Gold Badge !
  2 Min Ago
- SM
  
  You’ve Got Mail!
  
  Natalie has sent you a new message. Click here to view it.
  5 Min Ago
- Application Approved By Team 🚀.
  
  Congratulations! Your project application has been approved.
  Yesterday
- TR
  
  New Connection Request
  
  Peter has sent you a connection request, please check your connection requests.
  2 Days Ago
- Whoo! Your Order Is On the Way 🚚.
  
  Great news! Your order is now on its way to you.
  1 Hr Ago
- This Month Notes Prepared
  
  Your notes for this month are ready and available. Please review them at your convenience.
  2 min ago
- Order #54321 has been shipped.
  
  Order is on its way. You can track your shipment using the tracking number provided.
  2 min ago
- A Email Will be sent to customer.
  
  An email regarding your recent order will be sent to the customer shortly.
  10 Days ago
- Payment Form Will be Activated.
  
  The payment form will be activated shortly. Please ensure that all necessary details are correctly filled out to proceed with the payment process.
  Yesterday
- Meeting will be held tomorrow
  
  This is a reminder that a meeting will be held tomorrow.
  2 days ago
- Mail Login with Different Device
  
  Your email account has been accessed from a new device. If this was you, no action is needed.
  2 min ago
- Your Subscription was expaired.
  
  Your subscription has expired. Please renew your subscription to continue enjoying uninterrupted access to our services.
  15 min ago
- Your storage space is running low.
  
  Your storage space is running low. Please free up some space or upgrade your storage plan to avoid any interruptions.
  23 min ago
- Your changes have been saved.
  
  Your changes have been saved. If you need to make any more adjustments, feel free to do so.
  Yesterday
- New updates are available soon.
  
  Exciting new updates are on the way! Stay tuned for enhancements and new features that will be available soon.
  2 days ago
View All

No New Notifications
Mr. Jack
- Mr.Jack Miller UI/UX Designer
- Profile
- Inbox
- Task Manger
- Settings
- Support
- Log Out

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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 dark:bg-bodybg bg-white !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 border border-defaultborder dark:border-defaultborder/10 !bg-primary !z-[1000] !p-0 !max-w-[276px] " 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 border border-defaultborder dark:border-defaultborder/10 !bg-secondary !p-0 !max-w-[276px] " 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 border border-defaultborder dark:border-defaultborder/10 !bg-secondary  !p-0 !max-w-[276px]  " 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 border border-defaultborder dark:border-defaultborder/10 !bg-warning  !p-0 !max-w-[276px] " 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 border border-defaultborder dark:border-defaultborder/10 !bg-success  !p-0 !max-w-[276px]" 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 border border-defaultborder dark:border-defaultborder/10 !bg-danger  !p-0 !max-w-[276px] " 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 border border-defaultborder dark:border-defaultborder/10 !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-secondary" href="javascript:void(0);">Secondary
                <div class="hs-tooltip-content ti-main-tooltip-content border border-defaultborder dark:border-defaultborder/10 !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-info" href="javascript:void(0);">Info
                <div class="hs-tooltip-content ti-main-tooltip-content border border-defaultborder dark:border-defaultborder/10 !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-warning" href="javascript:void(0);">Warning
                <div class="hs-tooltip-content ti-main-tooltip-content border border-defaultborder dark:border-defaultborder/10 !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-success" href="javascript:void(0);">Success
                <div class="hs-tooltip-content ti-main-tooltip-content border border-defaultborder dark:border-defaultborder/10 !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-danger" href="javascript:void(0);">danger
                <div class="hs-tooltip-content ti-main-tooltip-content border border-defaultborder dark:border-defaultborder/10 !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 border border-defaultborder dark:border-defaultborder/10" 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 border border-defaultborder dark:border-defaultborder/10 !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 border border-defaultborder dark:border-defaultborder/10 !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 border border-defaultborder dark:border-defaultborder/10" 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 border border-defaultborder dark:border-defaultborder/10 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 border border-defaultborder dark:border-defaultborder/10 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 border border-defaultborder dark:border-defaultborder/10 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 border border-defaultborder dark:border-defaultborder/10 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 border border-defaultborder dark:border-defaultborder/10 !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="https://laravelui.spruko.com/tailwind/zynix/build/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 border border-defaultborder dark:border-defaultborder/10" 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 border border-defaultborder dark:border-defaultborder/10 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="https://laravelui.spruko.com/tailwind/zynix/build/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 border border-defaultborder dark:border-defaultborder/10 !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="https://laravelui.spruko.com/tailwind/zynix/build/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 Right

Popover Top

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 Right

Popover Top

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