1. Overlays
  2. Popovers

Components

Tailwind CSS Popovers - Preline UI

A simple and compact dialog of an action.

Requires JS

When to use

Purpose of content

A simple popup menu to provide extra information or operations.

Image Description

Comparing with Tooltip, besides information Popover card can include a header and provide action elements like links and buttons.

Interactions

Popovers are typically dismissable, whether by click on other parts of the page or second clicking the popover target (depending on implementation), for that reason you can set up a popover to allow you to interact with other elements on the page while still being able to read it's content.

On top of that, since popovers will remain open when mousing out of their target you can add additional buttons or interactions within them:

Image Description

Conclusion

If you want to add any additional content, interactions, or content more than about a line; or if you need the content to remain open without the target being mousedover use a popover.

Although it should be noted due to accessibility problems, potential SEO issues, and lack of discovery of the popover, it's not recommended unless you absolutely need it.

Four directions

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

Focus event

Use data-hs-tooltip-trigger="focus" for hover event.

Hover event

Use data-hs-tooltip-trigger="hover" for hover event.

With content

Example with content.

JavaScript behavior

Options

Parameters Description Options Default value
data-hs-tooltip-trigger Event to trigger a tooltip focus | hover | click hover
data-hs-tooltip-placement Tooltip placement top | top-left | top-right | bottom | bottom-left | bottom-right | right | right-top | right-bottom | left | left-top | left-bottom top
data-hs-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) => {...})