Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Tooltip Component

A versatile Tooltip, managing state, context, and styling. 
import { Button, Tooltip } from "@locus-ui/components";import styles from "./styles.css";
<Tooltip.Root>  <Tooltip.Trigger>    <Button variant="muted">Help</Button>  </Tooltip.Trigger>  <Tooltip.Content variant="outlined">    This is the help  </Tooltip.Content></Tooltip.Root>

View Source

Anatomy

Import the component and its parts:

Anatomy

import { Button, Tooltip } from "@locus-ui/components";
<Tooltip.Root>  <Tooltip.Trigger />  <Tooltip.Content /></Tooltip.Root>

Examples

Variants

Tooltip content comes with three built in variants, solid, outlined, and muted.

variants.tsx

import { Button, Tooltip } from "@locus-ui/components";
const variants = ["solid", "outlined", "muted"];
return variants.map((variant) => (  <Tooltip.Root key={variant}>    <Tooltip.Trigger>      <Button variant="muted">        {variant.charAt(0).toUpperCase() + variant.slice(1)}      </Button>    </Tooltip.Trigger>    <Tooltip.Content variant={variant}>

Sides

The side prop controls which side of the trigger the tooltip appears on: top, right, bottom, or left.

sides.tsx

import { Button, Tooltip } from "@locus-ui/components";
const sides = ["top", "right", "bottom", "left"];
return sides.map((side) => (  <Tooltip.Root key={side} side={side}>    <Tooltip.Trigger>      <Button variant="muted">        {side.charAt(0).toUpperCase() + side.slice(1)}      </Button>    </Tooltip.Trigger>    <Tooltip.Content variant="outlined">

Open on Click

The openOnClick prop enables opening the tooltip by clicking the trigger instead of hovering.

open-on-click.tsx

import { Button, Tooltip } from "@locus-ui/components";
<Tooltip.Root openOnHover={false} openOnClick>  <Tooltip.Trigger>    <Button variant="muted">Click Me</Button>  </Tooltip.Trigger>  <Tooltip.Content variant="outlined">    Opened by click  </Tooltip.Content></Tooltip.Root>

Delay

The delay prop controls the hover delay in milliseconds before the tooltip opens.

delay.tsx

import { Button, Tooltip } from "@locus-ui/components";
const delays = [0, 300, 1000];
return delays.map((delay) => (  <Tooltip.Root key={delay} delay={delay}>    <Tooltip.Trigger>      <Button variant="muted">{delay}ms</Button>    </Tooltip.Trigger>    <Tooltip.Content variant="outlined">      {delay}ms delay    </Tooltip.Content>