Tailwind CSS Popover

A simple and compact dialog of an action.

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

Four options are available: top, right, bottom, and left aligned.

Copy

                          
                            <div class="flex justify-center gap-4">
                              <div class="hs-tooltip inline-block [--trigger:click] [--placement:left]">
                                <a class="hs-tooltip-toggle block text-center" href="javascript:;">
                                  <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md 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>
                                  <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
                                    Left popover
                                  </div>
                                </a>
                              </div>

                              <div class="hs-tooltip inline-block [--trigger:focus]">
                                <a class="hs-tooltip-toggle block text-center" href="javascript:;">
                                  <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md 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>
                                  <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
                                    Top popover
                                  </div>
                                </a>
                              </div>

                              <div class="hs-tooltip inline-block [--trigger:click] [--placement:bottom]">
                                <a class="hs-tooltip-toggle block text-center" href="javascript:;">
                                  <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md 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>
                                  <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
                                    Bottom popover
                                  </div>
                                </a>
                              </div>

                              <div class="hs-tooltip inline-block [--trigger:click] [--placement:right]">
                                <a class="hs-tooltip-toggle block text-center" href="javascript:;">
                                  <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md 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>
                                  <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
                                    Right popover
                                  </div>
                                </a>
                              </div>
                            </div>

Basic usage

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

                      
                        <div class="hs-tooltip inline-block [--trigger:click]">
                          <a class="hs-tooltip-toggle block" href="javascript:;">
                            Click me
                            <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white" role="tooltip">
                              Top popover
                            </div>
                          </a>
                        </div>

JavaScript behavior

Options

Parameters	Description	Options	Default value
`[--trigger:*]`	Event to trigger a tooltip	focus \| hover \| click	`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 Popover

Tailwind CSS Popover

On this page