Tailwind CSS Tooltip

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

Installation

To get started, install Tooltip 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.

Copy

                          
                            <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="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                      <path d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                    </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-md shadow-sm dark:bg-slate-700" role="tooltip">
                                      Tooltip on top
                                    </span>
                                  </button>
                                </div>
                              </div>
                              <!-- End Col -->

                              <!-- Col -->
                              <div class="col-start-1 text-right">
                                <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="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                      <path d="M11.2792 1.64001L5.63273 7.28646C5.43747 7.48172 5.43747 7.79831 5.63273 7.99357L11.2792 13.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                    </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-md 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="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                      <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                    </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-md 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="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                      <path d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                    </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-md 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

Parameters	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`

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
`HSTooltip.show($tooltipEl)`	Show tooltip
`HSTooltip.hide($tooltipEl)`	Hide tooltip

Events

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

Show any tooltip event example.

                      
                        window.addEventListener('show.hs.tooltip', ($tooltipEl) => {...})

                        // OR

                        HSTooltip.on('show', ($tooltipEl) => {...})

Show specific tooltip event example.

                      
                        $tooltipEl.addEventListener('show.hs.tooltip', (evt) => {...})

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

On this page