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

I'm a popover on bottom
I'm a popover on bottom

Callout

This is a target to callout attention element

Callout on right

This is a target to callout attention element

Callout on right

Tooltip

I'm a tooltip on right
I'm a tooltip on right

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.

(this text is less relevant)

(this text is less relevant)