Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Docs API Reference

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { Tooltip } from "@smartacteam/ambient-web/tooltip";

export function TooltipDemo() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger render={<Button>Hover</Button>} />
        <Tooltip.Content>
          <p>Add to library</p>
        </Tooltip.Content>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}

Usage

import { Tooltip } from "@smartacteam/ambient-web/tooltip";

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger render={<Button>Hover</Button>} />
    <Tooltip.Content>
      <p>Add to library</p>
    </Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>