Tooltip
<ahi-tooltip> | AhiTooltip
Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when users hover, focus, tap, or click.
A tooltip’s target is its first child element, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
Tooltips use display: contents so they won’t interfere with how elements are positioned in a
flex or grid layout.
<ahi-tooltip content="This is a tooltip">
<ahi-button>Hover Me</ahi-button>
</ahi-tooltip>
Examples
Click trigger
Set the trigger attribute to click to toggle the tooltip on click instead of
hover.
<ahi-tooltip content="Click again to dismiss" trigger="click">
<ahi-button>Click to Toggle</ahi-button>
</ahi-tooltip>
Manual trigger
Tooltips can be controlled programmatically by setting the trigger attribute to
manual. Use the open attribute to control when the tooltip is shown.
<div style="display: flex; gap: var(--ahi-space-4); align-items: center;">
<ahi-button>Toggle Manually</ahi-button>
<ahi-tooltip content="This is an avatar" trigger="manual" class="tooltip-manual-trigger">
<ahi-avatar label="User"></ahi-avatar>
</ahi-tooltip>
</div>
<script>
const tooltip = document.querySelector('.tooltip-manual-trigger');
const toggle = tooltip.previousElementSibling;
toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
</script>
HTML in tooltips
Use the content slot to create tooltips with HTML content. Tooltips are designed only for text
and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls,
in a tooltip.
<ahi-tooltip>
<div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>
<ahi-button>Hover me</ahi-button>
</ahi-tooltip>
Hoisting
Tooltips are rendered in the browser’s
native top layer, so they automatically break out of containers with overflow: auto|hidden|scroll and are not
clipped, even when nested inside a scrolling or transformed ancestor. The tooltip below is shown in full
despite its container clipping overflow.
The hoist attribute is deprecated and will be removed in a future major. It
has no effect in browsers that support the
Popover API
(all current browsers); it is only consulted as a fallback in older browsers, where it switches the
tooltip to a fixed positioning strategy. Remove it from your markup — no replacement is
needed, since tooltips escape clipping containers on their own.
<div class="tooltip-hoisting">
<ahi-tooltip content="This is a tooltip">
<ahi-button>Hover me</ahi-button>
</ahi-tooltip>
</div>
<style>
.tooltip-hoisting {
position: relative;
border: solid 2px var(--ahi-border-neutral-subdued);
overflow: hidden;
padding: var(--ahi-space-4);
}
</style>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/tooltip/tooltip.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/tooltip/tooltip.js';Slots
| Name | Description |
|---|---|
| (default) | The tooltip’s target element. Avoid slotting in more than one element, as subsequent ones will be ignored. |
content
|
The content to render in the tooltip. Alternatively, you can use the content attribute.
|
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
content
|
The tooltip’s content. If you need to display HTML, use the content slot instead.
|
string
|
''
|
|
disabled
|
Disables the tooltip so it won’t show when triggered. |
boolean
|
false
|
|
distance
|
The distance in pixels from which to offset the tooltip away from its target. |
number
|
8
|
|
hoist
|
Deprecated. Enabled a fixed positioning strategy to keep the tooltip from being
clipped by a container with overflow: auto|hidden|scroll. The tooltip now renders in
the browser’s native top layer, which escapes clipping containers on its own, so this has no effect
except as a fallback on browsers without Popover API support. Remove it from your markup; no
replacement is needed.
|
boolean
|
false
|
|
open
|
Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. |
boolean
|
false
|
|
placement
|
The preferred placement of the tooltip. Note that the actual placement will vary as needed to keep the tooltip inside of the viewport. |
'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' |
'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'
|
'top'
|
|
skidding
|
The distance in pixels from which to offset the tooltip along its target. |
number
|
0
|
|
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.
hover responds only to a mouse or pen that rests on the target for
--show-delay; a tap or a click does not open it.
|
string
|
'hover'
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-show |
Emitted when the tooltip begins to show. | - |
ahi-after-show |
Emitted after the tooltip has shown and all animations are complete. | - |
ahi-hide |
Emitted when the tooltip begins to hide. | - |
ahi-after-hide |
Emitted after the tooltip has hidden and all animations are complete. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
show() |
Shows the tooltip | - |
hide() |
Hides the tooltip | - |
getTarget() |
Gets the target of the tooltip | - |
Learn more about methods.
Custom Properties
| Name | Description | Default |
|---|---|---|
--hide-delay |
The amount of time to wait before hiding the tooltip when hovering. | 0ms |
--show-delay |
The amount of time to wait before showing the tooltip when hovering. | var(–ahi-transition-slow) |
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the tooltip part instead. |
tooltip |
The component’s outer wrapper. |
base__popup |
The popup’s exported popup part. Use this to target the tooltip’s popup container.
|
base__arrow |
The popup’s exported arrow part. Use this to target the tooltip’s arrow. |
body |
The tooltip’s body where its content is rendered. |
Learn more about customizing CSS parts.
Animations
| Name | Description |
|---|---|
tooltip.show |
The animation to use when showing the tooltip. |
tooltip.hide |
The animation to use when hiding the tooltip. |
Learn more about customizing animations.
Dependencies
This component automatically imports the following dependencies.
<ahi-popup>