1. Plugins
  2. Popover

Plugins

Tailwind CSS Popover

A simple and compact dialog of an action.

Image Description

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.

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>
                      
                    

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.

Image Description
Check out Preline UI Popover