TooltipRtl() — ui Function Reference

Architecture documentation for the TooltipRtl() function in tooltip-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ TooltipRtl() — ui Function Reference

Dependency Diagram

graph TD
  5b41c623_a2a1_cda3_343e_683ccfefa83f["TooltipRtl()"]
  f4bd81ad_77cd_a46c_a9c0_4f74131ec657["tooltip-rtl.tsx"]
  5b41c623_a2a1_cda3_343e_683ccfefa83f -->|defined in| f4bd81ad_77cd_a46c_a9c0_4f74131ec657
  style 5b41c623_a2a1_cda3_343e_683ccfefa83f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/tooltip-rtl.tsx lines 57–88

export function TooltipRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <div className="grid gap-4">
      <div className="flex flex-wrap justify-center gap-2">
        {physicalSides.map((side) => (
          <Tooltip key={side}>
            <TooltipTrigger render={<Button variant="outline" />}>
              {t[side]}
            </TooltipTrigger>
            <TooltipContent side={side} dir={dir}>
              {t.content}
            </TooltipContent>
          </Tooltip>
        ))}
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        {logicalSides.map((side) => (
          <Tooltip key={side}>
            <TooltipTrigger render={<Button variant="outline" />}>
              {t[side]}
            </TooltipTrigger>
            <TooltipContent side={side} dir={dir}>
              {t.content}
            </TooltipContent>
          </Tooltip>
        ))}
      </div>
    </div>
  )
}