48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
const WithDelay = () => {
|
|
return (
|
|
<div className="flex flex-wrap gap-3">
|
|
<TooltipProvider delayDuration={2000}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline" color="info" >Delay Open (2000ms)</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent color="info">
|
|
<p>Tooltip Delay</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
<TooltipProvider delayDuration={1000}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline" color="warning">Hover Me (delay 1000ms)</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent color="warning">
|
|
<p>Tooltip Delay</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
<TooltipProvider >
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="outline" color="destructive">Then Hover me</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent color="destructive">
|
|
<p>Tooltip Delay</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WithDelay; |