Tailwind Popovers


Tailwind Popovers Example.

Pictures shows below is a example of popovers that is made by using tailwind css. This page explains how to make tailwind popovers with full customization using tippy js in step wise fashion.

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: Draw Layouts

Add a Button in which tooltips will show when it hovers. And a html block for tooltips layout. In below example button will be the tooltip action button and display:none html block will be the tooltip layouts that I have added some tailwind css classes for styling.

<button>Text</button>
<div style="display: none;">
    <div id="one">
        <div class="bg-white shadow-l">
        <div class="px-3 py-2 font-bold text-gray-700 bg-gray-100">Popover title</div>
        <div class="px-3 py-3 text-gray-600">And here's some amazing content. It's very engaging. Right?</div>
    </div>
</div>

Step 3: Initialize Tippy Js

Add below scripts anywhere in the page to initialize the tippy js, which results similar as in below image.

<script>
tippy('button', {
    content:document.getElementById('one').innerHTML,
    allowHTML: true,
});
</script>

Step 4: UI customization

Remove tippy js content padding to remove that black spaces around popovers by adding following css.

<style>
.tippy-content{
  padding:0 !important;
}
</style>

Step 4: Popover Positions

Use placement props in tippy contructor to define the placements. Available options are top, bottom, left, right

<script>
tippy('button', {
    content:document.getElementById('one').innerHTML,
    allowHTML: true,
    placement:'bottom',
});
</script>

Step 5: Tailwind Popover Dynamic positions with data-placement properties.

In this example we are adding four popovers button with dynamic positions set by data-placement properties.

Step 5.1: Add Buttons with data-placement options.

<button type="button" data-template='one' data-placement="right" class="bg-blue-600 text-gray-200 rounded hover:bg-blue-500 px-4 py-2 focus:outline-none">Primary</button>
<button type="button" data-template='one' data-placement="bottom" class="bg-gray-600 text-gray-100 rounded hover:bg-gray-500 px-4 py-2 focus:outline-none">Secondary</button>
<button type="button" data-template='one' data-placement="top" class="bg-green-500 text-gray-100 rounded hover:bg-green-400 px-4 py-2 focus:outline-none">Success</button>
<button type="button" data-template='one' data-placement="left" class="bg-red-500 text-gray-200 rounded hover:bg-red-400 px-4 py-2 focus:outline-none">Danger</button>

Step 5.2: Update the scripts.

<script>
tippy('button', {
    content(reference) {
    const id = reference.getAttribute('data-template');
    const template = document.getElementById(id);
    return template.innerHTML;
    },
    onMount(instance) {
        instance.popperInstance.setOptions({
        placement :instance.reference.getAttribute('data-placement')
        });
    },
    allowHTML: true,
    theme: 'white',
    trigger: 'click', 
});
</script>

Step 6: Tooltip Arrow color Customization

Style the css properties for a theme and later use that theme to apply the effect to arrow. For example we apply the white color to a thame named customtheme.. And use this theme while initializing the tippy instance.

<style>
.tippy-box[data-theme~='customtheme'] {
  background-color: white;
}
.tippy-box[data-theme~='customtheme'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: white;
}
.tippy-box[data-theme~='customtheme'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: white;
}
.tippy-box[data-theme~='customtheme'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: white;
}
.tippy-box[data-theme~='customtheme'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: white;
}
</style>