Change：Tooltip 対応 (利用不可)

hover 状態でも tooltip の表示が永続化されず、表示後即座に消えてしまう ([issue](preactjs/preact#3805))

_examples/Tooltip.tsx

@@ -1,14 +1,14 @@
-import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { Button } from '../components/ui/button.tsx'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components/ui/tooltip.tsx'
 
 export function TooltipDemo() {
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Button variant="outline" className="w-10 rounded-full p-0">
-            <span className="i-lucide:plus flex h-4 w-4" />
-            <span className="sr-only">Add</span>
+          <Button variant="outline" class="w-10 rounded-full p-0">
+            <span class="i-lucide:plus flex h-4 w-4" />
+            <span class="sr-only">Add</span>
           </Button>
         </TooltipTrigger>
         <TooltipContent>

components/ui/tooltip.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import * as React from 'react'
+import * as React from 'preact/compat'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as AlitTooltipPrimitive from "../../lib/components/tooltip.d.ts"
 
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.ts'
+import { ElementRef, ComponentPropsWithoutRef } from "../../lib/type-utils.ts"
 
 const TooltipProvider = TooltipPrimitive.Provider
 
@@ -12,9 +14,9 @@ const Tooltip = TooltipPrimitive.Root
 const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+  ElementRef<typeof AlitTooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof AlitTooltipPrimitive.Content>
+>(({ class:className, sideOffset = 4, ...props }, ref) => (
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}

deno.json

@@ -83,6 +83,7 @@
     "@radix-ui/react-switch": "https://esm.sh/*@radix-ui/[email protected]?alias=react:preact/compat,@types/react:preact/compat",
     "@radix-ui/react-tabs": "https://esm.sh/*@radix-ui/[email protected]?alias=react:preact/compat,@types/react:preact/compat",
     "@radix-ui/react-toast": "https://esm.sh/*@radix-ui/[email protected]?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat",
+    "@radix-ui/react-tooltip": "https://esm.sh/*@radix-ui/[email protected]?alias=react:preact/compat,@types/react:preact/compat",
 
     "aria-hidden": "https://esm.sh/[email protected]",
     "detect-node-es": "https://esm.sh/[email protected]?target=es2022",

islands/App.tsx

@@ -29,7 +29,7 @@ import { TabsDemo } from '../_examples/Tabs.tsx'
 import { TextareaDemo } from '../_examples/Textarea.tsx'
 import { ToastDemo } from '../_examples/Toast.tsx'
 import { ToggleDemo } from '../_examples/Toggle.tsx'
-//import { TooltipDemo } from './examples/Tooltip'
+import { TooltipDemo } from '../_examples/Tooltip.tsx'
 import { NavigationMenuDemo } from '../_examples/NavigationMenu.tsx'
 
 function App() {
@@ -109,7 +109,7 @@ function App() {
 
       <ToggleDemo />
 
-      {/*<TooltipDemo />*/}
+      <TooltipDemo />
 
       <SkeletonDemo />
     </div>

lib/components/tooltip.d.ts

@@ -0,0 +1,33 @@
+import * as React from "preact/compat"
+import { DismissableLayerProps } from "../type-utils-DismissableLayer.d.ts";
+import { PopperContentProps } from "../type-utils-PopperPrimitive.d.ts"; 
+
+/**
+ * Following type-definitions are based on "https://esm.sh/v133/@radix-ui/[email protected]/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdCxyZWFjdDpwcmVhY3QvY29tcGF0CmUvKg/dist/index.d.mts"
+ */ 
+
+
+interface TooltipContentImplProps extends Omit<PopperContentProps, 'onPlaced'> {
+  /**
+   * A more descriptive label for accessibility purpose
+   */
+  'aria-label'?: string;
+  /**
+   * Event handler called when the escape key is down.
+   * Can be prevented.
+   */
+  onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];
+  /**
+   * Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.
+   * Can be prevented.
+   */
+  onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];
+}
+interface TooltipContentProps extends TooltipContentImplProps {
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with React animation libraries.
+   */
+  forceMount?: true;
+}
+export const Content: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;