useTooltipContext

Hook to access the nearest Tooltip compound-component context

Import

import { useTooltipContext } from "@videojs/react";

Usage

Use this hook to build a custom part rendered inside Tooltip.Root.

function CloseTooltipButton() {
  const { tooltip } = useTooltipContext();

  return <button onClick={() => tooltip.close()}>Close tooltip</button>;
}

The hook throws when there is no surrounding Tooltip.Root.

API Reference

Return Value

Property	Type	Details
`core`	`TooltipCore`
`tooltip`	`function`
Type `{ triggerProps: TooltipTriggerProps; popupProps: TooltipPopupProps; open: (() => void); close: ((reason?: TooltipOpenChangeReason) => void) }`
`state`	`TooltipCore.State`
`preferredSide`	`TooltipCore.State['side']`
`setPositionedSide`	`function`
Type `((side: TooltipCore.State['side']) => void)`
`stateAttrMap`	`{ [Key in keyof State]?: string; }`
`anchorName`	`string`
`popupId`	`string`
`content`	`object`
Type `{ label?: string; shortcut?: string } \| undefined`
`setContent`	`((content: TooltipContent \| function`
Type `((content: TooltipContent \| undefined) => void)`
`boundary`	`'viewport' \| 'container' \| string & o...`
Type `'viewport' \| 'container' \| string & object \| Element \| null \| undefined`
`container`	`object \| null`