• overlays
  • Tooltip

overlays

Tailwind CSS Tooltip

A tooltip is a helpful tool that displays a message when you hover over an element.

Require FlyonUI JS

We harnessed FloatingUI to supercharge our tooltip experience.

Class Name
Type
Description
tooltipComponentBase class for tooltip component.
tooltip-togglePartBase class for toggling the display of tooltip.
tooltip-contentPartPlaces for tooltip content with popper.
tooltip-bodyPartContainer for tooltip content.
tooltip-primaryColorTooltip with ‘primary’ color.
tooltip-secondaryColorTooltip with ‘secondary’ color.
tooltip-accentColorTooltip with ‘accent’ color.
tooltip-infoColorTooltip with ‘info’ color.
tooltip-successColorTooltip with ‘success’ color.
tooltip-warningColorTooltip with ‘warning’ color.
tooltip-errorColorTooltip with ’error’ color.
tooltip-shown:{tw-utility-class}VariantAdds specific tailwind classes when the tooltip is open.

Basic example

Default

Utilize the class tooltip as the target for JavaScript to address the tooltip component, and use the component class tooltip-content for the tooltip container. Apply the Tailwind CSS display utility classes opacity-100 and visible to the tooltip-shown: modifier to toggle the visibility of the tooltip and make it visible.

Apply the component class tooltip-toggle to a button or any other element to trigger the appearance of the tooltip upon hovering.

Include any text or markup within the component class tooltip-body that you wish to display in the tooltip.

Use below given example for default tooltip on hover.

Colors

Semantic variants

Use modifier class tooltip-{semantic-color} with component class tooltip-body for colored tooltip.

Directions

Tooltip placements

Utilize the JavaScript option class [--placement:{direction}] to specify the tooltip placement in various directions. Here, direction can be top, bottom, left, or right. By default, the tooltip is positioned at the top. Tooltip component supports the same placement options as the Dropdown component. However, as Tooltips are most commonly used with these four placements, we have provided examples for these specific options.

Illustrations

Image tooltip

Please utilize the provided example for creating an image tooltip.

User details

Below given example shows user details tooltip upon hover.

Descriptive tooltip

Below given example shows descriptive tooltip upon hover.

Destroy/Reinitialize

The destroy method is provided to facilitate the destruction of a tooltip element.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
[--trigger:*]Event to trigger a tooltip.focus, hover, clickhover
[--placement:*]Tooltip placement.top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-endtop
[--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, absolutefixed
[--interaction:*]Adjusts interactivity within the tooltip/popover content.booleantrue
[-—prevent-popper:*]Prevents popper positioning calculation issue.booleanfalse

Methods

The HSTooltip object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
show()Force show tooltip.
hide()Force hide tooltip.
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
STATIC METHODS
HSTooltip.getInstance(target, isInstance)
Returns the element associated to the target.
  • The target can be either a Node or a string (a valid CSS 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)
Shows the element associated to the target.
  • target should be a Node or string (valid selector).

Method usage

Below is a demonstration of how to use the public methods. Apply the ID to the tooltip component class and target it using the methods. We’ve included JavaScript for a public method, enabling it to function when the method button is clicked. To test other methods, copy and paste the following code into your console, then click the button.

Force show tooltip (public method).

// This method is used in above example.
const tooltip = new HSTooltip(document.querySelector('#tooltip-target'));
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('#tooltip-target');
});

Open item (mixed).

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

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

Destroy instance (public).

const tooltip = document.querySelector('.tooltip')
const { element } = HSTooltip.getInstance(tooltip, true)

destroy.addEventListener('click', () => {
  element.destroy()
})

Events

METHOD
DESCRIPTION
on:showTriggered whenever a tooltip is showed.
on:hideTriggered whenever a tooltip is hidden.

Event usage

Below is a demonstration of how to use the event. We’ve included JavaScript to handle the events, allowing it to execute when the corresponding event is fired. To test these events, monitor your console.

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

const { element } = HSTooltip.getInstance('#tooltip-target-2', true)

element.on('show', (instance) => console.log("show"));
element.on('hide', (instance) => console.log("hide"));