Tooltip

<ts-tooltip> vv0.4.0

The ts-tooltip component.

Open in Storybook for interactive demos.

Preview

<ts-tooltip hide-delay="0" placement="top" show-delay="200">Content</ts-tooltip>

Property	Attribute	Type	Default	Description
`content`	`content`	`string`	`''`	The tooltip text content.
`disabled`	`disabled`	`boolean`	`false`	Disables the tooltip.
`hideDelay`	`hide-delay`	`number`	`0`	Delay in ms before hiding the tooltip.
`placement`	`placement`	`"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"`	`'top'`	Placement of the tooltip relative to the trigger.
`showDelay`	`show-delay`	`number`	`200`	Delay in ms before showing the tooltip.

Method	Signature	Description
`hide`	`hide() => Promise<void>`	Programmatically hide the tooltip.
`show`	`show() => Promise<void>`	Programmatically show the tooltip.

Name	Description
`(default)`	Default slot for the trigger element.

Use ::part() to style internal elements:

Part	Description
`arrow`	The tooltip arrow element.
`base`	The tooltip popup container.

ts-tooltip::part(arrow) {
  /* your custom styles */
}

<ts-tooltip hide-delay="0" placement="top" show-delay="200">Content</ts-tooltip>

import { TsTooltip } from '@tessera-ui/react';

<TsTooltip hideDelay="0" placement="top">Content</TsTooltip>