# Tooltip
<flow-tooltip> The tooltip component adds a popup with explanatory text to an element.
<html>
<flow-tooltip tip-text="Tooltip">
<flow-badge>Hover Over</flow-badge>
</flow-tooltip>
</html>
# Examples
# Positioning
Use the position attribute to set the preferred placement of the tooltip.
<style>
.center-div {
display: flex;
height: 100px;
align-items: center;
justify-content: center;
}
flow-badge {
margin-right: 5px;
}
</style>
<html>
<div class="center-div">
<flow-tooltip position="left" tip-text="Tooltip">
<flow-badge>Left</flow-badge>
</flow-tooltip>
<flow-tooltip position="top" tip-text="Tooltip">
<flow-badge>Top</flow-badge>
</flow-tooltip>
<flow-tooltip position="bottom" tip-text="Tooltip">
<flow-badge>Bottom</flow-badge>
</flow-tooltip>
<flow-tooltip position="right" tip-text="Tooltip">
<flow-badge>Right</flow-badge>
</flow-tooltip>
</div>
</html>
# Attaching to a Target
As an alternative to wrapping the target element with a tooltip, you can specify the
for attribute to select a target by ID.
<html>
<flow-badge id="target">Hover Over</flow-badge>
<flow-tooltip for="target" position="right" tip-text="Tooltip"></flow-tooltip>
</html>
# Properties
| Property | Description | Type | Default |
|---|---|---|---|
disabled | Set to `true` to disable triggering of the tooltip. | boolean | false |
for | Specify the target element ID of the tooltip. This is an alternative to wrapping the target element with the tooltip. | string | |
offset | The distance in pixels from which to offset the tooltip away from its target. | number | 10 |
open | Set to `true` to force the tooltip to display. | boolean | false |
position | The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | 'top' |
tipText tip-text | The tooltip text. | string | '' |
trigger | Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically. | string | 'hover focus' |
# Methods
| Method | Description |
|---|---|
hide | hide() => Promise<void> Hide the tooltip. |
show | show() => Promise<void> Show the tooltip. |
# Slots
| Slot | Description |
|---|---|
(default) | The tooltip's target element. Only the first element will be used as the target. Alternatively specify the `for` attribute to attach the tooltip to its target element. |
# CSS Custom Properties
| Name | Description |
|---|---|
--background-color | The tooltip background color. (Default: color-step 100) |
--color | The tooltip text color. (Default: text) |
--hide-delay | The amount of time to wait before hiding the tooltip. (Default: 0ms) |
--max-width | The maximum width of the tooltip. (Default: 20rem) |
--show-delay | The amount of time to wait before showing the tooltip. (Default: 125ms) |
# CSS Parts
| Name | Description |
|---|---|
tooltip | The tooltip container DIV. |