testing-shadcn-in-fresh

Tooltip

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

Code

import { Button } from 'https://deno.land/x/testing_shadcn_ui_for_deno@0.1.2/components/button.tsx'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from 'https://deno.land/x/testing_shadcn_ui_for_deno@0.1.2/components/tool
import IconPlus from "https://deno.land/x/tabler_icons_tsx@0.0.7/tsx/plus.tsx"
import { useState } from "preact/hooks"

export function TooltipDemo() {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <TooltipProvider>
      <Tooltip open={isOpen} onOpenChange={setIsOpen} >
        <TooltipTrigger asChild>
          <Button variant="outline" class="w-10 rounded-full p-0">
            <IconPlus class="flex h-4 w-4" />
            <span class="sr-only">Add</span>
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}