Blips
Documentação

Tooltip

Um popup que exibe informações relacionadas a um elemento quando o elemento recebe foco do teclado ou o mouse passa sobre ele.

Carregando…
"use client";

import { Button } from "@blips/ui/components/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@blips/ui/components/tooltip";

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Instalação

pnpm add @blips/ui

Uso

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@blips/ui/components/tooltip"
<Tooltip>
  <TooltipTrigger>Passe o mouse</TooltipTrigger>
  <TooltipContent>
    <p>Adicionar à biblioteca</p>
  </TooltipContent>
</Tooltip>

Exemplos

Exemplo

Exibe uma dica simples quando o usuário passa o mouse sobre o gatilho.

Carregando…
"use client";

import { Button } from "@blips/ui/components/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@blips/ui/components/tooltip";

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Referência da API

Consulte a documentação do Radix Tooltip.

AnteriorToggle GroupPróximoSkills