Use the Tooltip component from Pol-ui to indicate helpful information when hovering over an element such as a button or link to improve the UI/UX of your website.
Importation
Import the component from pol-ui to use the Tooltip element:
import { Tooltip } from "pol-ui";Default Tooltip
Default Tooltip
import { Tooltip } from "pol-ui";
export const TooltipComponent = () => {
return (
<Tooltip content="Tooltip content">
<Button> Hover me </Button>
</Tooltip>
);
};Props
Tooltip
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | The state of the tooltip |
| children | React.ReactNode | - | The content of the tooltip |
| rounded | RoundedSizes | 'xl' | The rounded size of the tooltip |
| theme | TooltipTheme | - | The theme of the tooltip |
| color | Colors | ColorsEnum.primary | The color of the tooltip |
| disabled | boolean | false | The state of the tooltip |
| onClick | (e) => void | - | The function to call when the tooltip is clicked |
💡
You can also provide any prop comming from the HTML button tag.
Examples
Trigger on Click
Trigger on Click
import { Tooltip } from "pol-ui";
export const TooltipComponent = () => {
return (
<Tooltip content="Tooltip content" trigger="click">
<Button> Hover me </Button>
</Tooltip>
);
};As Popover
Trigger as Popover
import { Tooltip, Input, Button } from "pol-ui";
export const TooltipComponent = () => {
return (
<Tooltip
content={
<div className="flex flex-col gap-2 items-center p-2">
<h2 className="text-white">Your Profile</h2>
<Input type="text" placeholder="Name" />
<Input type="email" placeholder="Email" />
<Button type="submit">Send</Button>
</div>
}
trigger="click"
>
<Button>Open form</Button>
</Tooltip>
);
};Tooltip Without Arrow
Tooltip Without Arrow
import { Tooltip } from "pol-ui";
export const TooltipComponent = () => {
return (
<Tooltip content="Tooltip content" arrow={false}>
<Button> Hover me </Button>
</Tooltip>
);
};Slow animation
Slow animation
import { Tooltip } from "pol-ui";
export const TooltipComponent = () => {
return (
<Tooltip content="Tooltip content" arrow={false} animation="duration-1000">
<Button> Hover me </Button>
</Tooltip>
);
};Dark mode
Dark mode
import { Tooltip, Button } from "pol-ui";
export const TooltipComponent = () => {
return (
<div className=" grid grid-cols-2 border border-secondary rounded-2xl overflow-hidden">
<div className="flex p-8 ">
<Tooltip content="Tooltip content" placement="bottom">
<Button>Default tooltip</Button>
</Tooltip>
</div>
<div className="flex p-8 bg-secondary-900 dark">
<Tooltip content="Tooltip content" placement="bottom">
<Button>Default tooltip</Button>
</Tooltip>
</div>
</div>
);
};Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
export interface FloatingTheme {
arrow: {
base: string;
placement: string;
style: {
dark: string;
light: string;
auto: string;
};
};
animation: string;
base: string;
content: string;
hidden: string;
style: {
auto: string;
dark: string;
light: string;
};
target: string;
}