Overlays

Tooltip

A tooltip is a small, informative message that appears when a user hovers over or focuses on an element for additional context.

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.

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.

The Himalayas About Himalayas The Great Himalayan mountain ranges in the Indian sub-continent region. Read more the himalayas , Asia's towering mountain range, separates the Indian subcontinent from the Tibetan Plateau. Mount Everest, Earth's highest peak, and over 100 others surpass 7,200 m. Spanning Nepal, China, Pakistan, Bhutan, and India, they birth major rivers like the Indus and the Ganges. Home to 600 million people, they shape South Asian and Tibetan cultures.

User details

Below given example shows user details tooltip upon hover.

Descriptive tooltip

Below given example shows descriptive tooltip upon hover.

Terms & Conditions

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a tooltip element.

JavaScript behavior

Methods — Method usage

The `HSTooltip` object is contained within the global `window` object.

JavaScript

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

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

Events — Event usage

METHOD| DESCRIPTION `on:show` | Triggered whenever a tooltip is showed. `on:hide` | Triggered whenever a tooltip is hidden.

JavaScript

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

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

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`tooltip`	component	Base class for tooltip component.
`tooltip-toggle`	part	Base class for toggling the display of tooltip.
`tooltip-content`	part	Places for tooltip content with popper.
`tooltip-body`	part	Container for tooltip content.
`tooltip-primary`	color	Tooltip with 'primary' color.
`tooltip-secondary`	color	Tooltip with 'secondary' color.
`tooltip-accent`	color	Tooltip with 'accent' color.
`tooltip-info`	color	Tooltip with 'info' color.
`tooltip-success`	color	Tooltip with 'success' color.
`tooltip-warning`	color	Tooltip with 'warning' color.
`tooltip-error`	color	Tooltip with 'error' color.
`tooltip-shown:{tw-utility-class}`	variant	Adds specific tailwind classes when the tooltip is open.