Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
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>
);
}
open prop.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.<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>
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.Delay in milliseconds before showing the tooltip.
e.g. ["bottom", "bottom-start"]
The distance (in px) between the tooltip and trigger.
Controls the open state of the tooltip (controlled mode).
Changes interaction to use hover instead of focus.
placement
"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"
default:"top"
