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`

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`

Slots

Name	Required	Description
`content`		Text content

Demo

API

Tag

Name
`<STooltip>`

Slots

Name	Required	Description
`content`		Text content

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`

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.

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