Placement


<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-placement="top">Top</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-placement="right">Right</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-placement="bottom">Bottom</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-placement="left">Left</button>

Arrows


<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="fade">Default</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-arrowType="round" data-tippy-animation="fade" >Round</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-arrowTransform="scaleX(1.5)" data-tippy-animation="fade">Wide</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-arrowTransform="scaleX(0.75)" data-tippy-animation="fade">Skinny</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-arrowTransform="scale(0.75)" data-tippy-animation="fade">Small</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-arrowTransform="scale(1.35)" data-tippy-animation="fade">Large</button>

Placement Hover & Click

                                       
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="false" data-tippy-interactive="true">Interactive (hover)</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-interactive="true" data-tippy-trigger="click">Interactive (click)</button>

Arrows with Animation


<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="shift-away">Default</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="shift-toward" >Round</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="fade">Wide</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="scale">Skinny</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="perspective">Small</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="shift-away" data-tippy-inertia="true" data-tippy-duration="[600, 300]">Large</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="shift-toward" data-tippy-inertia="true" data-tippy-duration="[600, 300]">Default</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="scale" data-tippy-inertia="true" data-tippy-duration="[600, 300]">Default</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-animation="perspective" data-tippy-inertia="true" data-tippy-duration="[600, 300]">Default</button>

Duration


<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-duration="0">0ms</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-duration="200">200ms</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-duration="1000">1000ms</button>
<button type="button" class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="My Tooltip!" data-tippy-arrow="true" data-tippy-duration="[500, 200]">[500ms, 200ms]</button>

Themes


<button class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="See-through!" data-tippy-theme="translucent">Translucent</button>
<button class="tippy-btn inline-block focus:outline-none text-slate-500 hover:bg-slate-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-slate-500  text-sm font-medium py-1 px-3 rounded mb-1" data-tippy-content="Nice n&#39; light" data-tippy-theme="light" data-tippy-arrow="true">Light</button>

Popover Themes


<div class="w-full">
    <button class="px-3 py-1 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10  dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700  ease-linear transition-all duration-150" type="button" data-placement="" onclick="openPopover(event,'popover-id')">
        Popover
    </button>
    <div class="hidden bg-slate-50 border-0 mb-3 shadow  z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-id">
        <div>
            <div class="bg-slate-50 text-slate-800  font-semibold p-3 mb-0 border-b border-dashed border-slate-300 uppercase rounded-t-lg">
                Popover title
            </div>
            <div class="text-slate-600 p-3">
                And here's some amazing content. It's very engaging. Right?
            </div>
        </div>
    </div>

    <button class="text-blue-500 hover:text-white border border-blue-500 hover:bg-blue-500 focus:outline-none  font-medium rounded text-sm px-3 py-1 text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500  ease-linear transition-all duration-150" type="button" data-placement="" onclick="openPopover(event,'popover-primary')">
        Popover
    </button>
    <div class="hidden bg-primary-500 border-0 mb-3 shadow  z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-primary">
        <div>
            <div class="bg-primary-500 text-white  font-semibold p-3 mb-0 border-b border-dashed border-slate-200 uppercase rounded-t-lg">
                Popover title
            </div>
            <div class="text-white p-3">
                And here's some amazing content. It's very engaging. Right?
            </div>
        </div>
    </div>

    <button class="text-pink-500 hover:text-white border border-pink-500 hover:bg-pink-500 focus:outline-none  font-medium rounded text-sm px-3 py-1 text-center mr-2 mb-2 dark:border-pink-500 dark:text-pink-500 dark:hover:text-white dark:hover:bg-pink-500  ease-linear transition-all duration-150" type="button" data-placement="" onclick="openPopover(event,'popover-pink')">
        Popover
    </button>
    <div class="hidden bg-pink-500 border-0 mb-3 shadow  z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-pink">
        <div>
            <div class="bg-pink-500 text-white  font-semibold p-3 mb-0 border-b border-dashed border-slate-200 uppercase rounded-t-lg">
                Popover title
            </div>
            <div class="text-slate-200 p-3">
                And here's some amazing content. It's very engaging. Right?
            </div>
        </div>
    </div>
    <button class="text-green-500 hover:text-white border border-green-500 hover:bg-green-500 focus:outline-none  font-medium rounded text-sm px-3 py-1 text-center mr-2 mb-2 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-500  ease-linear transition-all duration-150" type="button" data-placement="" onclick="openPopover(event,'popover-green')">
        Popover
    </button>
    <div class="hidden bg-green-500 border-0 mb-3 shadow  z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-green">
        <div>
            <div class="bg-green-500 text-white  font-semibold p-3 mb-0 border-b border-dashed border-slate-200 uppercase rounded-t-lg">
                Popover title
            </div>
            <div class="text-slate-200 p-3">
                And here's some amazing content. It's very engaging. Right?
            </div>
        </div>
    </div>

    <button class="text-yellow-500 hover:text-white border border-yellow-500 hover:bg-yellow-500 focus:outline-none  font-medium rounded text-sm px-3 py-1 text-center mr-2 mb-2 dark:border-yellow-500 dark:text-yellow-500 dark:hover:text-white dark:hover:bg-yellow-500  ease-linear transition-all duration-150" type="button" data-placement="" onclick="openPopover(event,'popover-yellow')">
        Popover
    </button>
    <div class="hidden bg-yellow-500 border-0 mb-3 shadow  z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-yellow">
        <div>
            <div class="bg-yellow-500 text-white  font-semibold p-3 mb-0 border-b border-dashed border-slate-200 uppercase rounded-t-lg">
                Popover title
            </div>
            <div class="text-slate-200 p-3">
                And here's some amazing content. It's very engaging. Right?
            </div>
        </div>
    </div>
</div>

Popover & Tooltips

Placement

Arrows

Placement Hover & Click

Arrows with Animation

Duration

Themes

Popover Themes