Code

Implementation
Tooltip Props

Common Examples

The Tooltip component is used to add a floating label to an element, usually triggered on hover or focus.

import { Tooltip } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Tooltip>
      <Tooltip.Trigger>
        <span>Hover to open</span>
      </Tooltip.Trigger>
      <Tooltip.Content>Tooltip Content</Tooltip.Content>
    </Tooltip>
  );
}

By default, the open state of a tooltip is managed internally and opens when the trigger element has hover or focus.To manually control the open state of the tooltip, use the open prop.

Demo

In some cases, the context around the tooltip trigger may require the tooltip to render further away from or closer to the trigger.In these cases, adjust the offset prop, which accepts a number representing pixels.

Demo

<Tooltip
  defaultOpen={false}
  disableFlip={false}
  disableShift={false}
  fallbackPlacements={["bottom", "bottom-start"]}
  offset={5}
  open={false}
  placement="top"
  onOpenChange={(open) => console.log(open)}
>
  <Tooltip.Trigger>
    <span>Hover to open</span>
  </Tooltip.Trigger>
  <Tooltip.Content>Tooltip Content</Tooltip.Content>
</Tooltip>

The Tooltip component is expected to contain both the Tooltip.Trigger, which will show the tooltip when hovered and serve as a reference for where the tooltip will be placed, and the Tooltip.Content, which defines what content will be shown inside the tooltip itself.

defaultOpen

boolean

default:"false"

delay

number

default:"100"

Delay in milliseconds before showing the tooltip.

disableFlip

boolean

default:"false"

disableShift

boolean

default:"false"

fallbackPlacements

Placement[]

e.g. ["bottom", "bottom-start"]

offset

number

default:"5"

The distance (in px) between the tooltip and trigger.

onOpenChange

(open: boolean) => void

open

boolean

Controls the open state of the tooltip (controlled mode).

openOnHover

boolean

Changes interaction to use hover instead of focus.

placement

default:"top"

Anvil2 Web

Resources

Common Examples

Controlling tooltip state

Adjusting tooltip offset

`Tooltip` Props

Anvil2 Web

Resources

​Common Examples

​Controlling tooltip state

​Adjusting tooltip offset

​Tooltip Props

Common Examples

Controlling tooltip state

Adjusting tooltip offset

`Tooltip` Props