Tooltip is a component that displays a tooltip when the user hovers over an element.
import { Tooltip } from 'primereact/tooltip';<Tooltip.Group>
<Tooltip>
<Tooltip.Trigger></Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
</Tooltip.Group>import { Button } from 'primereact/button';
import { Tooltip } from 'primereact/tooltip';
export default function ArrowDemo() {
return (
<div className="card flex items-center justify-center gap-6">
<Tooltip>
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
Show Tooltip
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip with arrow</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
<Tooltip>
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
Show Tooltip
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip without arrow</p>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
</div>
);
}Use side and align to control the placement of the tooltip.
import { Button } from 'primereact/button';
import { Tooltip } from 'primereact/tooltip';
export default function PlacementDemo() {
return (
<div className="card flex flex-col items-center justify-center gap-12">
<div className="flex items-center justify-center gap-6">
<Tooltip side="top">
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
Top
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip placed to the top</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
<Tooltip side="bottom">
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
Bottom
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip placed to the bottom</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
<Tooltip side="right">
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
Right
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip placed to the right</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
<Tooltip side="left">
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
Left
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip placed to the left</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
</div>
<div className="flex items-center justify-center gap-6">
<Tooltip align="start">
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
Start
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip aligned to the start</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
<Tooltip align="center">
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
Center
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip aligned to the center</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
<Tooltip align="end">
<Tooltip.Trigger as={Button} severity="secondary" variant="outlined">
End
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip aligned to the end</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
</div>
</div>
);
}Use sideOffset and alignOffset to control the offset of the tooltip.
import { Button } from 'primereact/button';
import { Tooltip } from 'primereact/tooltip';
function OffsetDemo() {
return (
<div className="card flex items-center justify-center gap-4">
<Tooltip sideOffset={24}>
<Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
Show Tooltip
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip with 24px side offset</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
<Tooltip alignOffset={24} align="end" side="bottom">
<Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
Show Tooltip
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>Tooltip with 24px align offset</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
</div>
);
}
export default OffsetDemo;Use showDelayDuration and hideDelayDuration to control the delay of the tooltip. For Tooltip.Group, use timeout and skipTimeout instead.
import { Button } from 'primereact/button';
import { Tooltip } from 'primereact/tooltip';
export default function DelayDemo() {
return (
<div className="card flex flex-col items-center justify-center gap-8">
<Tooltip showDelayDuration={1000} hideDelayDuration={1000}>
<Tooltip.Trigger as={Button} severity="secondary">
Show Tooltip
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>This is a tooltip</p>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
<Tooltip.Group as="div" className="flex items-center gap-2" timeout={1000} skipTimeout={300}>
<Tooltip>
<Tooltip.Trigger as={Button} severity="secondary">
Item 1
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>This is a tooltip</p>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
<Tooltip>
<Tooltip.Trigger as={Button} severity="secondary">
Item 2
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>This is a tooltip</p>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
</Tooltip.Group>
</div>
);
}import { ToggleButton } from 'primereact/togglebutton';
import { Tooltip } from 'primereact/tooltip';
const content = [
{
icon: 'pi pi-align-left',
label: 'Align left',
value: 'left'
},
{
icon: 'pi pi-align-center',
label: 'Align center',
value: 'center'
},
{
icon: 'pi pi-align-right',
label: 'Align right',
value: 'right'
},
{
icon: 'pi pi-align-justify',
label: 'Align justify',
value: 'justify'
}
];
export default function WithToggleButtonDemo() {
return (
<div className="card flex items-center justify-center">
<Tooltip.Group>
<ToggleButton.Group allowEmpty={false}>
{content.map((item) => (
<Tooltip key={item.value}>
<Tooltip.Trigger as={ToggleButton} value={item.value}>
<ToggleButton.Indicator>
<i className={item.icon}></i>
</ToggleButton.Indicator>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
<p>{item.label}</p>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip>
))}
</ToggleButton.Group>
</Tooltip.Group>
</div>
);
}