ドキュメント
ツールチップ
ツールチップ
要素がキーボードフォーカスを受け取ったとき、またはマウスが要素の上にホバーしたときに、その要素に関連する情報を表示するポップアップ。
import type { TooltipTriggerProps } from "@kobalte/core/tooltip";
import { Button } from "@repo/tailwindcss/ui/button";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@repo/tailwindcss/ui/tooltip";
const TooltipDemo = () => {
return (
<Tooltip>
<TooltipTrigger
as={(props: TooltipTriggerProps) => (
<Button variant="outline" {...props}>
Hover
</Button>
)}
/>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
);
};
export default TooltipDemo;インストール
npx shadcn-solid@latest add tooltip以下の依存関係をインストールします
npm install @kobalte/core以下のコードをプロジェクトにコピー＆ペーストします
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type {
TooltipContentProps,
TooltipRootProps,
} from "@kobalte/core/tooltip";
import { Tooltip as TooltipPrimitive } from "@kobalte/core/tooltip";
import { type ValidComponent, mergeProps, splitProps } from "solid-js";
export const TooltipTrigger = TooltipPrimitive.Trigger;
export const Tooltip = (props: TooltipRootProps) => {
const merge = mergeProps<TooltipRootProps[]>(
{
gutter: 4,
flip: false,
},
props,
);
return <TooltipPrimitive {...merge} />;
};
type tooltipContentProps<T extends ValidComponent = "div"> =
TooltipContentProps<T> & {
class?: string;
};
export const TooltipContent = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, tooltipContentProps<T>>,
) => {
const [local, rest] = splitProps(props as tooltipContentProps, ["class"]);
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
class={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
local.class,
)}
{...rest}
/>
</TooltipPrimitive.Portal>
);
};以下の依存関係をインストールします
npm install @kobalte/core以下のコードをプロジェクトにコピー＆ペーストします
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type {
TooltipContentProps,
TooltipRootProps,
} from "@kobalte/core/tooltip";
import { Tooltip as TooltipPrimitive } from "@kobalte/core/tooltip";
import { type ValidComponent, mergeProps, splitProps } from "solid-js";
export const TooltipTrigger = TooltipPrimitive.Trigger;
export const Tooltip = (props: TooltipRootProps) => {
const merge = mergeProps<TooltipRootProps[]>(
{
gutter: 4,
flip: false,
},
props,
);
return <TooltipPrimitive {...merge} />;
};
type tooltipContentProps<T extends ValidComponent = "div"> =
TooltipContentProps<T> & {
class?: string;
};
export const TooltipContent = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, tooltipContentProps<T>>,
) => {
const [local, rest] = splitProps(props as tooltipContentProps, ["class"]);
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
class={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95)",
local.class,
)}
{...rest}
/>
</TooltipPrimitive.Portal>
);
};使用方法
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>