Tooltip

A popup that displays informative text when users hover over or focus on an element.

How to Import

Add this import to your component file

app/page.tsx

1import { Tooltip, TooltipTrigger } from '@/components/lightswind/tooltip';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

content	React.ReactNode	-	The content to display inside the tooltip.	Required
variant	'default' \| 'info' \| 'success' \| 'warning' \| 'error'	'default'	Visual variant of the tooltip.	Optional
side	'top' \| 'right' \| 'bottom' \| 'left'	'top'	The side of the trigger the tooltip should appear on.	Optional
align	'center' \| 'start' \| 'end'	'center'	Alignment of the tooltip relative to the trigger.	Optional
sideOffset	number	8	Distance in pixels from the trigger.	Optional
delayDuration	number	300	Delay in milliseconds before showing the tooltip.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Tooltip, TooltipTrigger } from '@/components/lightswind/tooltip';
2import { Button } from '@/components/lightswind/button';
3
4export function TooltipDemo() {
5  return (
6    <Tooltip 
7      content="Add to library"
8      variant="default"
9      side="top"
10    >
11      <TooltipTrigger asChild>
12        <Button variant="outline">Hover Me</Button>
13      </TooltipTrigger>
14    </Tooltip>
15  );
16}

Variants

Different visual and behavioral variants of the component

Default Tooltip Variant

A clean black popup tooltip providing helpful action descriptions on hover.

Previoustoast

Nextcalendar

A product byＭＵＨＩＬＡＮ and Team❤️.

Tooltip

A popup that displays informative text when users hover over or focus on an element.

...

How to Import

Add this import to your component file

app/page.tsx

1import { Tooltip, TooltipTrigger } from '@/components/lightswind/tooltip';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

content	React.ReactNode	-	The content to display inside the tooltip.	Required
variant	'default' \| 'info' \| 'success' \| 'warning' \| 'error'	'default'	Visual variant of the tooltip.	Optional
side	'top' \| 'right' \| 'bottom' \| 'left'	'top'	The side of the trigger the tooltip should appear on.	Optional
align	'center' \| 'start' \| 'end'	'center'	Alignment of the tooltip relative to the trigger.	Optional
sideOffset	number	8	Distance in pixels from the trigger.	Optional
delayDuration	number	300	Delay in milliseconds before showing the tooltip.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Tooltip, TooltipTrigger } from '@/components/lightswind/tooltip';
2import { Button } from '@/components/lightswind/button';
3
4export function TooltipDemo() {
5  return (
6    <Tooltip 
7      content="Add to library"
8      variant="default"
9      side="top"
10    >
11      <TooltipTrigger asChild>
12        <Button variant="outline">Hover Me</Button>
13      </TooltipTrigger>
14    </Tooltip>
15  );
16}

Variants

Different visual and behavioral variants of the component

Default Tooltip Variant

A clean black popup tooltip providing helpful action descriptions on hover.

Previoustoast

Nextcalendar

A product byＭＵＨＩＬＡＮ and Team❤️.

Tooltip

How to Import

Props

Basic Usage

Variants

Default Tooltip Variant

On This Page

Contribute

Tooltip

How to Import

Props

Basic Usage

Variants

Default Tooltip Variant

On This Page

Contribute

React Tooltip Component - Lightswind UI

Key Details of React Tooltip

Tooltip

How to Import

Props

Basic Usage

Variants

Default Tooltip Variant

On This Page

Contribute

Tooltip

How to Import

Props

Basic Usage

Variants

Default Tooltip Variant

On This Page

Contribute