Tooltip

Tooltip provides contextual information.

Tooltip is a component that provides contextual information when users hover over or click an element.

Example

Code

Import

Import the component from @faststore/ui


_10import { Tooltip } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


_10@import '@faststore/ui/src/components/molecules/Tooltip/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Name	Type	Description	Default
content*	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Text/content of the tooltip.
placement	`"top-start" \| "top-center" \| "top-end" \| "right-start" \| "right-center" \| "right-end" \| "bottom-start" \| "bottom-center" \| "bottom-end" \| "left-start" \| "left-center" \| "left-end"`	Defines the side or side-alignment (e.g., "top-center", "right-end") of the tooltip.	`top-center`
dismissible	`false \| true`	If the tooltip can be closed by a button.	`false`
onDismiss	`(ev: any) => void`	Called when the dismiss button is clicked.
children*	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Element that activates the tooltip on hover/focus.
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-tooltip`
maxWidth	`number`	Maximum width of the tooltip.	`300`
describedById	`string`	ID for the tooltip content to be used with aria-describedby.	`tooltip-content`

Local token	Default value/Global token linked
`--fs-button-height`	`var(--fs-control-tap-size)`
`--fs-tooltip-z-index`	`var(--fs-z-index-high)`
`--fs-tooltip-background`	`var(--fs-color-neutral-6)`
`--fs-tooltip-text-color`	`var(--fs-color-text-inverse)`
`--fs-tooltip-border-radius`	`var(--fs-border-radius)`
`--fs-tooltip-padding`	`var(--fs-spacing-2)`
`--fs-tooltip-gap`	`var(--fs-spacing-1)`

`--fs-tooltip-transition-property`	`opacity`
`--fs-tooltip-transition-timing`	`var(--fs-transition-timing)`
`--fs-tooltip-transition-function`	`var(--fs-transition-function)`

Local token	Default value/Global token linked
`--fs-tooltip-indicator-size`	`var(--fs-spacing-1)`
`--fs-tooltip-indicator-distance-edge`	`var(--fs-spacing-3)`
`--fs-tooltip-indicator-distance-base`	`var(--fs-spacing-1)`
`--fs-tooltip-indicator-translate`	`calc(var(--fs-tooltip-indicator-size) + var(--fs-tooltip-indicator-distance-base))`

For further customization, you can use the following data attributes:

data-fs-tooltip

data-fs-tooltip-wrapper

data-fs-tooltip-content

data-fs-tooltip-dismiss-button

data-fs-tooltip-indicator