Tooltip
<afp-tooltip>
A tooltip component for displaying brief, informative messages.
The tooltip component extends the popover component, so all popover properties (like
offset) can also be used on the tooltip component. For more information and demo, see the popover documentation.
Properties
Learn more about properties.
| Name | Description | Reflects | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
trigger
|
Determines when the tooltip appears. Multiple triggers can be combined: `click hover focus manual`. When `manual` is included, the popover is fully programmatically controlled.
Type
AfpTrigger
Default
[AfpTrigger.HOVER, AfpTrigger.FOCUS] |
|||||||||||||||||||||||||||
duration
|
The id of the element the tooltip should anchor to.
Type
number
Default
150 |
|||||||||||||||||||||||||||
open
|
Whether the tooltip is currently open.
Type
boolean
Default
false |
|
||||||||||||||||||||||||||
strategy
|
Positioning strategy for the tooltip. Either `absolute` or `fixed`.
Type
AfpStrategy
Default
AfpStrategy.ABSOLUTE |
|||||||||||||||||||||||||||
placement
|
The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the panel inside of the viewport. If set to an empty array ([]), it enables auto placement. If containing more than two items, it is automatically restricted to the provided placements. You can also input a space-separated string.
Type
AfpPlacement
Default
[] |
|
||||||||||||||||||||||||||
for
|
The id of the element the popover should anchor to.
Type
string
|
|
||||||||||||||||||||||||||
noAutoFocus
noautofocus
|
If true, the popover will not automatically focus the first focusable element when opened.
Type
boolean
Default
false |
|
||||||||||||||||||||||||||
matchWidth
matchwidth
|
If true, the popover will match the width of its anchor element.
Type
boolean
Default
false |
|||||||||||||||||||||||||||
offset
|
Offset configuration for positioning.
Type
AfpOffset
Default
{ mainAxis: 8, crossAxis: 0, alignmentAxis: 0, } |
|
||||||||||||||||||||||||||
hoverDelay
hoverdelay
|
Delay in milliseconds before closing on hover out.
Type
number
Default
150 |
Methods
Learn more about using methods.
| Name | Description | Arguments |
|---|---|---|
show
|
Opens the tooltip programmatically.
Return
void |
- |
hide
|
Closes the tooltip programmatically and
restores focus to the anchor if not in `"manual"` mode.
Return
void |
- |
toggle
|
Toggles the tooltip open or closed programmatically.
Return
void |
- |
Events
Learn more about events.
| Name | Return | Description |
|---|---|---|
afp-show
|
void
|
Emitted when the tooltip is shown.
|
afp-after-show
|
void
|
Emitted after the tooltip has been shown.
|
afp-hide
|
void
|
Emitted when the tooltip is hidden.
|
afp-after-hide
|
void
|
Emitted after the tooltip has been hidden.
|
Slots
Learn more about slots.
| Name | Description |
|---|---|
default
|
The default slot for the tooltip content.
|
CSS Parts
Learn more about CSS Parts.
| Name | Description | Selector |
|---|---|---|
tooltip
|
The tooltip content container.
|
::part(tooltip)
|
base
|
The popover container element.
|
::part(base)
|
CSS Custom Properties
| Name | Description | Default |
|---|---|---|
--afp-tooltip-max-width
|
The maximum width of the tooltip.
|
15rem
|
Dependencies
The component automatically brings in the listed items, including any nested dependencies that may exist.
Importing
Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.
import '@afp-design-system/core/dist/components/tooltip/tooltip.js';