Desenvolvedores
src_
components_
ui_
Tooltip.jsx

Explicação 💡

Neste código, estamos criando um componente de tooltip utilizando a biblioteca Radix UI, uma biblioteca de componentes acessíveis e modulares. O tooltip é uma dica que aparece quando o usuário interage com um elemento, geralmente ao passar o mouse por cima, fornecendo informações adicionais de forma discreta.

Detalhamento dos Componentes 🧑‍💻

  1. TooltipProvider: Provedor do contexto do Tooltip. Ele é necessário para encapsular o uso do Tooltip e seus componentes filhos.
  2. Tooltip: Componente raiz que controla a lógica do estado do tooltip.
  3. TooltipTrigger: O elemento que, quando interagido (geralmente com hover), ativa a exibição do tooltip.
  4. TooltipContent: O conteúdo do tooltip, onde a informação a ser exibida é renderizada.

Importações 🔧

"use client"
 
import * as React from "react"  // Importando o React para utilização dos hooks e componentes.
import * as TooltipPrimitive from "@radix-ui/react-tooltip"  // Importando os componentes Tooltip da Radix UI.
import { cn } from "@/lib/utils"  // Importando uma função utilitária para manipulação dinâmica de classes CSS.

O primeiro bloco importa as dependências necessárias para trabalhar com o React e o Radix UI. A função cn é utilizada para combinar classes CSS dinamicamente, facilitando a personalização do estilo dos componentes.

Componente TooltipProvider 🛠️

O TooltipProvider serve como um provedor para o contexto do tooltip. Ele precisa envolver os outros componentes relacionados ao tooltip para garantir que o estado de visibilidade seja gerenciado corretamente.

const TooltipProvider = TooltipPrimitive.Provider  // Encapsula o estado e controle dos tooltips.

Componente Tooltip ⚡

O Tooltip é o componente raiz, que controla o estado geral do tooltip, como quando ele deve ser exibido e ocultado.

const Tooltip = TooltipPrimitive.Root  // Componente raiz que gerencia o estado do Tooltip.

Componente TooltipTrigger 🔑

O TooltipTrigger é o elemento que ativa a exibição do tooltip. Normalmente, isso ocorre quando o usuário passa o mouse sobre o componente que contém esse trigger.

const TooltipTrigger = TooltipPrimitive.Trigger  // Gatilho que ativa a exibição do Tooltip.

Componente TooltipContent 📝

O TooltipContent é o conteúdo do tooltip, ou seja, a parte que exibe as informações. Ele é estilizado com várias classes para animações e transições de entrada e saída.

const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}  // Define o espaçamento da posição do tooltip.
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className  // Permite adicionar classes customizadas.
    )}
    {...props}  // Espalha as propriedades recebidas para o componente Content.
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName  // Nomeia o componente para fácil identificação.

O componente TooltipContent define o conteúdo que será exibido no tooltip. As classes CSS aplicadas proporcionam uma série de animações e transições de entrada e saída, como fade-in, zoom-in, e animações de deslizar dependendo da posição do tooltip (top, bottom, left, right).

Exportação dos Componentes 🚀

No final, todos os componentes são exportados para que possam ser utilizados em outros lugares do projeto.

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }  // Exporta todos os componentes relacionados ao Tooltip.

Código Completo 👨‍💻

"use client"
 
import * as React from "react"  // Importando o React para utilização dos hooks e componentes.
import * as TooltipPrimitive from "@radix-ui/react-tooltip"  // Importando os componentes Tooltip da Radix UI.
import { cn } from "@/lib/utils"  // Importando uma função utilitária para manipulação dinâmica de classes CSS.
 
const TooltipProvider = TooltipPrimitive.Provider  // Encapsula o estado e controle dos tooltips.
const Tooltip = TooltipPrimitive.Root  // Componente raiz que gerencia o estado do Tooltip.
const TooltipTrigger = TooltipPrimitive.Trigger  // Gatilho que ativa a exibição do Tooltip.
 
const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}  // Define o espaçamento da posição do tooltip.
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className  // Permite adicionar classes customizadas.
    )}
    {...props}  // Espalha as propriedades recebidas para o componente Content.
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName  // Nomeia o componente para fácil identificação.
 
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }  // Exporta todos os componentes relacionados ao Tooltip.
Textarea.jsxformatSlug.ts