Skip to content

Commit

Permalink
Change:Tooltip 対応 (利用不可)
Browse files Browse the repository at this point in the history
hover 状態でも tooltip の表示が永続化されず、表示後即座に消えてしまう ([issue](preactjs/preact#3805))
  • Loading branch information
nikogoli committed Nov 2, 2023
1 parent fe6cb75 commit a74a1cc
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 12 deletions.
10 changes: 5 additions & 5 deletions _examples/Tooltip.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
12 changes: 7 additions & 5 deletions components/ui/tooltip.tsx
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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}
Expand Down
1 change: 1 addition & 0 deletions deno.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions islands/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -109,7 +109,7 @@ function App() {

<ToggleDemo />

{/*<TooltipDemo />*/}
<TooltipDemo />

<SkeletonDemo />
</div>
Expand Down
33 changes: 33 additions & 0 deletions lib/components/tooltip.d.ts
Original file line number Diff line number Diff line change
@@ -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>>;

0 comments on commit a74a1cc

Please sign in to comment.