Tailwind CSS Tooltip & Popover

A tooltip is a floating, non-actionable label used to explain a user interface element or feature.

Installation

To get started, install Tooltip & Popover plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/tooltip

Example

Hover over the buttons below to see the four tooltip directions: top, right, bottom, and left.

                          
                            <div class="grid grid-cols-3 gap-y-4 gap-x-2 max-w-[15rem] mx-auto">
                              <div class="col-start-2 text-center">
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle w-10 h-10 inline-flex justify-center items-center gap-2 rounded-full bg-white/[.1] border border-white/[.3] text-white shadow-md shadow-gray-800/[.05] hover:bg-white hover:border-white hover:text-blue-600 hover:shadow-gray-800/[.1] transition">
                                    <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
                                      Tooltip on top
                                    </span>
                                  </button>
                                </div>
                              </div>
                              <!-- End Col -->

                              <!-- Col -->
                              <div class="col-start-1 text-end">
                                <div class="hs-tooltip inline-block [--placement:left]">
                                  <button type="button" class="hs-tooltip-toggle w-10 h-10 inline-flex justify-center items-center gap-2 rounded-full bg-white/[.1] border border-white/[.3] text-white shadow-md shadow-gray-800/[.05] hover:bg-white hover:border-white hover:text-blue-600 hover:shadow-gray-800/[.1] transition">
                                    <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
                                      Tooltip on left
                                    </span>
                                  </button>
                                </div>
                              </div>
                              <!-- End Col -->
                              
                              <!-- Col -->
                              <div class="col-start-3">
                                <div class="hs-tooltip inline-block [--placement:right]">
                                  <button type="button" class="hs-tooltip-toggle w-10 h-10 inline-flex justify-center items-center gap-2 rounded-full bg-white/[.1] border border-white/[.3] text-white shadow-md shadow-gray-800/[.05] hover:bg-white hover:border-white hover:text-blue-600 hover:shadow-gray-800/[.1] transition">
                                    <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
                                      Tooltip on right
                                    </span>
                                  </button>
                                </div>
                              </div>
                              <!-- End Col -->
                              
                              <!-- Col -->
                              <div class="col-start-2 text-center">
                                <div class="hs-tooltip inline-block [--placement:bottom]">
                                  <button type="button" class="hs-tooltip-toggle w-10 h-10 inline-flex justify-center items-center gap-2 rounded-full bg-white/[.1] border border-white/[.3] text-white shadow-md shadow-gray-800/[.05] hover:bg-white hover:border-white hover:text-blue-600 hover:shadow-gray-800/[.1] transition">
                                    <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
                                      Tooltip on bottom
                                    </span>
                                  </button>
                                </div>
                              </div>
                              <!-- End Col -->
                            </div>

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <div class="hs-tooltip inline-block">
                          <button type="button" class="hs-tooltip-toggle">
                            Hover me
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-white" role="tooltip">
                              Tooltip on top
                            </span>
                          </button>
                        </div>

JavaScript behavior

Options

Name	Description	Options	Default value
`[--trigger:*]`	Event to trigger a tooltip.	"focus" \| "hover"	`hover`
`[--placement:*]`	Tooltip placement.	"top" \| "top-left" \| "top-right" \| "bottom" \| "bottom-left" \| "bottom-right" \| "right" \| "right-top" \| "right-bottom" \| "left" \| "left-top" \| "left-bottom"	`top`
`[--tooltip-strategy:*]`	Sets the position to `absolute` instead of `fixed`, and removes the `transform` styles to position the menu `relative` to the relative parent block.	"fixed" \| "absolute"	`absolute`
`[—prevent-popper:*]`	Prevents popper positioning calculation issue.	"true" \| "false"	`false`

Classes

Name	Description
`hs-tooltip`	Tooltip container.
`hs-tooltip-toggle`	Tooltip toggle.

Methods

The HSTooltip object is contained within the global window object

Method	Description
Public methods
`show()`	Force show tooltip.
`hide()`	Force hide tooltip.
Static methods
`HSTooltip.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`
`HSTooltip.show(target)`	Shows the element associated to the `target`. `target` should be a Node or string (valid selector)
`HSTooltip.hide(target)`	Hides the element associated to the `target`. `target` should be a Node or string (valid selector)

Force show tooltip (public method).

                      
                        const tooltip = new HSTooltip(document.querySelector('#tooltip'));
                        const showBtn = document.querySelector('#show-btn');

                        showBtn.addEventListener('click', () => {
                          tooltip.show();
                        });

Force show tooltip (static method).

                      
                        const showBtn = document.querySelector('#show-btn');

                        showBtn.addEventListener('click', () => {
                          HSTooltip.show(document.querySelector('#tooltip'));
                        });

Open item (mixed).

                      
                        const { element } = HSTooltip.getInstance('#tooltip', true);
                        const showBtn = document.querySelector('#show-btn');

                        showBtn.addEventListener('click', () => {
                          element.show();
                        });

Events

Method	Description
`on:show`	Called when tooltip is shown.
`on:hide`	Called when tooltip is hidden.

An example where a function is run every time a tooltip shows.

                      
                        const el = HSTooltip.getInstance('#tooltip');

                        el.on('show', (instance) => {...});

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Tooltip

Tailwind CSS Tooltip & Popover

On this page