Tooltips display informative text when users hover over, focus on, or tap an element.
When activated, Tooltips display a text label identifying an element, such as a description of its function.
Below you can view various implementations and example markup.
The alert component comes with three variants: filled, outlined, and standard (default).
<.tooltip content="Edit" variant="simple">
<.button variant="icon">
<.heroicon name="pencil" variant="outline"/>
</.button>
</.tooltip>
<.tooltip content="Edit" variant="arrow">
<.button variant="icon">
<.heroicon name="pencil" variant="outline"/>
</.button>
</.tooltip>
The Tooltip has 12 placements choice. They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction.
Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.
<.tooltip>
<:content>
<.typography
color="white"
variant="h2"
>
Lorem ipsum
</.typography>
<.typography color="white">
Ut enim ad minim veniam
</.typography>
</:content>
<.button variant="icon">
<Icon.InformationCircle.outline />
</.button>
</.tooltip>
Ut enim ad minim veniam
Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.
<.tooltip>
<:content>
<.typography
color="white"
variant="h2"
>
Lorem ipsum
</.typography>
<.typography color="white">
Ut enim ad minim veniam
</.typography>
</:content>
<.button variant="icon">
<Icon.InformationCircle.outline />
</.button>
</.tooltip>
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Tooltip
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| align | :center | :inherit | :justify | :left | :right | :inherit | Set the text-align on the component. |
| color | any framework-provided color | :slate | The text color to use. |
| element | Any HTML Element | :p | HTML element to use. |
| extend_class | string | Adds additional classes. | |
| margin | bool | true | If true, the text will have margin. |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| variant | :h1 | :h2 | :h3 | :h4 | :p | :p | The links to use. |