Attention
Props
prop | type | default |
---|---|---|
show |
boolean
Whether Attention element should be visible.
|
false |
placement * |
"top" | "right" | "bottom" | "left"
Placement according to the target element. Arrow would be on the opposite side of
this position.
|
- |
target-selector * |
string
Selector of element that the Attention component is rendered relatively to.
|
- |
tooltip |
boolean
Whether Attention element is rendered as a tooltip.
|
false |
callout |
boolean
Whether Attention element is rendered as an inline callout.
|
false |
popover |
boolean
Whether Attention element is rendered as a popover.
|
false |
no-arrow |
boolean
Render Attention element without an arrow.
|
false |
Visual Options
Popover
Callout
This is a target to callout attention element
This is a target to callout attention element
Tooltip
Accessibility
If the Attention element has "left" or "top" position, it should be placed before the target element in the DOM.
Attention element handles accessibility automatically by wrapping its slotted content with
a div
with role="tooltip"
, and setting an
aria-describedby
attribute on the target element.
It is possible to tell assistive technologies to recognize only a part of Attention's text
content. To do that set role="tooltip"
on the relevant text element nested in
f-attention
and reference it by id through the use of
aria-describedby
. The aria-describedby
attribute is on the
target element, not on f-attention
.
I'm a popover with ARIA "tooltip" role
(this text is less relevant)
I'm a popover with ARIA "tooltip" role
(this text is less relevant)