<div class="ti-btn-list">
    <div class="hs-tooltip ti-main-tooltip">
        <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-primary-full">
            Tooltip on top
            <span class="hs-tooltip-content  ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm " role="tooltip">
            Tooltip on top
            </span>
        </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:right]">
        <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-primary-full">
            Tooltip on right
            <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700" role="tooltip">
            Tooltip on right
            </span>
        </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:bottom]">
        <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-primary-full">
            Tooltip on bottom
            <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700" role="tooltip">
            Tooltip on bottom
            </span>
        </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:left]">
        <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-primary-full">
            Tooltip on left
            <span class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700" role="tooltip">
            Tooltip on left
            </span>
        </button>
        </div>
    </div>

<div class="ti-btn-list">
        <div class="hs-tooltip ti-main-tooltip [--placement:top]">
            <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-primary-full">
                Primary Tooltip
                <span
                    class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-primary !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                    role="tooltip">
                    Primary Tooltip
                </span>
            </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:right]">
            <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-secondary-full">
                Secondary Tooltip
                <span
                    class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-secondary !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                    role="tooltip">
                    Secondary Tooltip
                </span>
            </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:bottom]">
            <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-warning-full">
                Warning Tooltip
                <span
                    class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-warning !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                    role="tooltip">
                    Warning Tooltip
                </span>
            </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:left]">
            <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-info-full">
                Info Tooltip
                <span
                    class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-info !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                    role="tooltip">
                    Info Tooltip
                </span>
            </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:top]">
            <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-success-full">
                Success Tooltip
                <span
                    class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-success !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                    role="tooltip">
                    Success Tooltip
                </span>
            </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:bottom]">
            <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-danger-full">
                Danger Tooltip
                <span
                    class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-danger !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                    role="tooltip">
                    Danger Tooltip
                </span>
            </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:bottom]">
            <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-light">
                Light Tooltip
                <span
                    class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-light !text-xs !font-medium !text-defaulttextcolor shadow-sm dark:bg-slate-700"
                    role="tooltip">
                    Light Tooltip
            </button>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--placement:bottom]">
            <button type="button" class="hs-tooltip-toggle ti-btn ti-btn-black-full">
                Dark Tooltip
                <span
                    class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                    role="tooltip">
                    Dark Tooltip
                </span>
            </button>
        </div>
    </div>

<div class="hs-tooltip ti-main-tooltip [--placement:top]">
    <p class="text-muted mb-0">
        Hover on the link to view the <a href="javascript:void(0);"
            data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary"
            title="Link Tooltip"></a>
        <span class="hs-tooltip-toggle !text-primary">
            Tooltip
            <span
                class="hs-tooltip-content ti-main-tooltip-content !py-1 !px-1 !bg-primary !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                role="tooltip">
                Link Tooltip
            </span>
        </span>
    </p>
    </div>

 <div class="hs-tooltip ti-main-tooltip [--placement:top]">
        <button type="button" class="hs-tooltip-toggle me-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="fill-primary" height="24px"
                viewBox="0 0 24 24" width="24px" fill="#000000">
                <path d="M0 0h24v24H0V0z" fill="none" />
                <path
                    d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z" />
            </svg>
            <span
                class="hs-tooltip-content ti-main-tooltip-content !py-1 !px-2 !bg-primary !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                role="tooltip">
                Home
            </span>
        </button>
    </div>
    <div class="hs-tooltip ti-main-tooltip [--placement:top]">
        <button type="button" class="hs-tooltip-toggle me-4">
            <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="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z" />
            </svg>
            <span
                class="hs-tooltip-content ti-main-tooltip-content !py-1 !px-2 !bg-secondary !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                role="tooltip">
                Message
            </span>
        </button>
    </div>
    <div class="hs-tooltip ti-main-tooltip [--placement:top]">
        <button type="button" class="hs-tooltip-toggle me-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="fill-warning"
                enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24"
                width="24px" fill="#000000">
                <g>
                    <rect fill="none" height="24" width="24" />
                </g>
                <g>
                    <path
                        d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z" />
                </g>
            </svg>
            <span
                class="hs-tooltip-content ti-main-tooltip-content !py-1 !px-2 !bg-warning !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                role="tooltip">
                Add User
            </span>
        </button>
    </div>
    <div class="hs-tooltip ti-main-tooltip [--placement:top]">
        <button type="button" class="hs-tooltip-toggle me-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="fill-info" height="24px"
                viewBox="0 0 24 24" width="24px" fill="#000000">
                <path d="M0 0h24v24H0V0z" fill="none" />
                <path
                    d="M4.01 6.03l7.51 3.22-7.52-1 .01-2.22m7.5 8.72L4 17.97v-2.22l7.51-1M2.01 3L2 10l15 2-15 2 .01 7L23 12 2.01 3z" />
            </svg>
            <span
                class="hs-tooltip-content ti-main-tooltip-content !py-1 !px-2 !bg-info !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                role="tooltip">
                Send File
            </span>
        </button>
    </div>
    <div class="hs-tooltip ti-main-tooltip [--placement:top]">
        <button type="button" class="hs-tooltip-toggle me-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="fill-success" height="24px"
                viewBox="0 0 24 24" width="24px" fill="#000000">
                <path d="M0 0h24v24H0V0z" fill="none" />
                <path
                    d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
            </svg>
            <span
                class="hs-tooltip-content ti-main-tooltip-content !py-1 !px-2 !bg-success !text-xs !font-medium !text-white shadow-sm dark:bg-slate-700"
                role="tooltip">
                Action
            </span>
        </button>
    </div>

<div class="hs-tooltip ti-main-tooltip">
    <button type="button"
        class="hs-tooltip-toggle ti-btn ti-btn-primary-full opacity-[0.6]">
        Disabled button
        <span
            class="hs-tooltip-content  ti-main-tooltip-content py-1 px-2 !bg-black !text-xs !font-medium !text-white shadow-sm "
            role="tooltip">
            Default Tooltip
        </span>
    </button>
    </div>

<div class="hs-tooltip ti-main-tooltip">
    <button type="button"
        class="hs-tooltip-toggle avatar avatar-md me-2 online avatar-rounded">
        <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/12.jpg" alt="img">
    </button>
    <span
        class="hs-tooltip-content  ti-main-tooltip-content !py-1 !px-2 !bg-primary !text-xs !font-medium !text-white shadow-sm "
        role="tooltip">
        Alex Carey
    </span>
    </div>
    <div class="hs-tooltip ti-main-tooltip">
    <button type="button"
        class="hs-tooltip-toggle avatar avatar-lg me-2 online avatar-rounded">
        <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/3.jpg" alt="img">
    </button>
    <span
        class="hs-tooltip-content  ti-main-tooltip-content !py-1 !px-1 !bg-primary !text-xs !font-medium !text-white shadow-sm "
        role="tooltip">
        Marina Kai
    </span>
    </div>
    <div class="hs-tooltip ti-main-tooltip">
    <button type="button"
        class="hs-tooltip-toggle avatar avatar-xl me-2 offline avatar-rounded">
        <img src="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/15.jpg" alt="img">
    </button>
    <span
        class="hs-tooltip-content  ti-main-tooltip-content !py-1 !px-1 !bg-primary !text-xs !font-medium !text-white shadow-sm "
        role="tooltip">
        Marina Kai
    </span>
    </div>