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

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

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)