Tooltip

The Tooltip component displays informative text when users hover over, focus on, or tap an element. This component is designed to be used in conjunction with other components to create a consistent and accessible design system.

Attributes

text - The text content to display in the tooltip.
align - The default alignment of the tooltip. Default is top.

Slots

default - The content to display the tooltip on.

Basic Usage

This is a tooltip

Copy to clipboard

<aura:tooltip text="This is a tooltip">
    <aura:button solid text="Hover over me" />
</aura:tooltip>
<aura:tooltip text="This is a tooltip">
    <aura:button glow icon="information-circle" />
</aura:tooltip>

Alignment

The align attribute can have the following values:

Top: .top, .top-start, .top-end
Bottom: .bottom, .bottom-start, .bottom-end
Left: .left, .left-start, .left-end
Right: .right, .right-start, .right-end

This is a tooltip

Copy to clipboard

<aura:tooltip left ...>

<aura:tooltip right ...>

<aura:tooltip top ...>

<aura:tooltip bottom ...>

Home