Looking for the old docs? Go here

Buttons

Tooltip

A contextual text bubble that displays a description for an element which appears on interaction.

API Reference

Section titled API Reference

Root

Section titled Root

A contextual text bubble that displays a description for an element that appears on pointer hover or keyboard focus.

import { Tooltip } from "@vidstack/react";

const Component = Tooltip.Root;
type Props = Tooltip.RootProps;
<Tooltip.Root>
  <Tooltip.Trigger></Tooltip.Trigger>
  <Tooltip.Content></Tooltip.Content>
</Tooltip.Root>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false
children
ReactNode
null

Trigger

Section titled Trigger
HTMLAttributes
Ref<HTMLButtonElement>

Wraps the element that will trigger showing/hiding the tooltip on hover or keyboard focus. The tooltip content is positioned relative to this element.

import { Tooltip } from "@vidstack/react";

const Component = Tooltip.Trigger;
type Props = Tooltip.TriggerProps;
<Tooltip.Root>
  <Tooltip.Trigger></Tooltip.Trigger>
  <Tooltip.Content></Tooltip.Content>
</Tooltip.Root>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false
children
ReactNode
null

Data Attributes

Section titled Data Attributes
/* Example. */
.component[data-foo] {}
NameDescription
data-visible
Whether tooltip is visible.
data-hocus
Whether tooltip is being keyboard focused or hovered over.

Content

Section titled Content
HTMLAttributes
Ref<HTMLElement>

This component contains the content that is visible when the tooltip trigger is interacted with.

import { Tooltip } from "@vidstack/react";

const Component = Tooltip.Content;
type Props = Tooltip.ContentProps;
<Tooltip.Root>
  <Tooltip.Trigger></Tooltip.Trigger>
  <Tooltip.Content></Tooltip.Content>
</Tooltip.Root>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
alignOffset
number
0
offset
number
0
placement
TooltipPlacement
'top center'

Data Attributes

Section titled Data Attributes
/* Example. */
.component[data-foo] {}
NameDescription
data-visible
Whether tooltip is visible.
data-placement
The placement prop setting.
data-hocus
Whether tooltip is being keyboard focused or hovered over.
Previous
Google Cast Button
Next
Slider