4.46.4

Tooltip

User-triggered messages that provide a brief description of a component's function

Demo

API

Tag

Name Description
<s-tooltip> Custom tag, accepts a slot as content

Attributes

Name Value Required Description
tooltipid String

Unique ID for the tooltip element.
triggerid String

ID of the tooltip trigger.
placement String

Position of the tooltip relative to the trigger. Defaults to bottom. Must have one of the following values:

top, bottom, left, right, top-start, bottom-start, left-start, right-start, top-end, bottom-end, left-end, right-end
hidearrow Boolean

Hides the tooltip arrow. Defaults to false.

Properties

Name Value Required Description
tooltipId String

Unique ID for the tooltip element.
triggerId String

ID of the tooltip trigger.
placement String

Position of the tooltip relative to the trigger. Defaults to bottom. Must have one of the following values:

top, bottom, left, right, top-start, bottom-start, left-start, right-start, top-end, bottom-end, left-end, right-end

hideArrow Boolean

Hides the tooltip arrow. Defaults to false.

Slots

Name Required Description
content

HTML content (see Guidelines)

Demo

API

Tag

Name
<STooltip>

Slots

Name Required Description
content

HTML content (see Guidelines)

Props

Name Value Required Description
tooltipId String

Unique ID for the tooltip element.
triggerId String

ID of the tooltip trigger.

placement String

Position of the tooltip relative to the trigger. Defaults to bottom. Must have one of the following values:

top, bottom, left, right, top-start, bottom-start, left-start, right-start, top-end, bottom-end, left-end, right-end
hideArrow Boolean

Hides the tooltip arrow. Defaults to false.

Skylab React links

General information about using our React package

Guidelines

Accessibility

Assign the tooltip ID to the tooltip trigger's aria-describedby attribute. This ensures that screen readers will associate the trigger with the tooltip text.

Do not include interactive elements, such as inputs, buttons, or links, as tooltip content. Browser focus does not transfer to the tooltip content when it is open.

Only use focusable elements as tooltip triggers. Keyboard-only users will not be able to access tooltip content if the trigger is not focusable.

Usage

A tooltip must be used to describe the function of an icon-only button, in addition to an aria-label on the button.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com