Tailwind Tooltip


Tailwind Tooltip Example

Tailwind doesnot support tooltip out of the box. We use tippy js for tooltip and Tailwind Popover to acheive bootstrap style tooltips and popovers.[tippy js uses popper js library under the hood in which bootstrap directly uses popper js to achieve tooltip and popovers]. Here we explain the how to make tooltips using tippy js with tailwind css in step by step.

Step 1: First add Tippy Js from CDN as follows

You can use either cdn or npm and yarn to install tippy js. CDN for tooltips is given below, Please refer to tippy js websites for detail information. Tippy Js Installtion Detail guides

<!-- Development -->
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="https://unpkg.com/@popperjs/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>

Step 2: Add Buttons for Tooltips

We are adding four buttons from Button section for left, right, top and button tooltips. Use data-title and data-placement properties for data and placement respectively.

<button type="button" data-title='This is right tooltip' data-placement="right" class="bg-blue-600 text-gray-200 rounded hover:bg-blue-500 px-4 py-2 focus:outline-none">Right</button>
<button type="button" data-title='This is bottom tooltip' data-placement="bottom" class="bg-gray-600 text-gray-100 rounded hover:bg-gray-500 px-4 py-2 focus:outline-none">Bottom</button>
<button type="button" data-title='This is top tooltip' data-placement="top" class="bg-green-500 text-gray-100 rounded hover:bg-green-400 px-4 py-2 focus:outline-none">Top</button>
<button type="button" data-title='This is left tooltip' data-placement="left" class="bg-red-500 text-gray-200 rounded hover:bg-red-400 px-4 py-2 focus:outline-none">Left</button>

Step 3: Initialize tooltip scripts.

We are dynamically reding data content from data-title attributes and placement is from data-placement attributes. You can customize the name of attributes as your need.

<script>
tippy('button', {
    content:(reference)=>reference.getAttribute('data-title'),
    onMount(instance) {
        instance.popperInstance.setOptions({
        placement :instance.reference.getAttribute('data-placement')
        });
    }
});
</script>