Tooltip
Used to display additional information when a user hovers over an element.
'use client'
import { Button, Tooltip } from '@saas-ui/react'
export const TooltipBasic = () => {
return (
<Tooltip content="This is the tooltip content">
<Button variant="outline" size="sm">
Hover me
</Button>
</Tooltip>
)
}
Anatomy
import { Tooltip } from '@saas-ui/react/tooltip'<Tooltip content="...">
<button />
</Tooltip>Examples
Arrow
Use the showArrow prop to show an arrow on the tooltip.
'use client'
import { Button } from '@chakra-ui/react'
import { Tooltip } from '@saas-ui/react'
export const TooltipWithArrow = () => {
return (
<Tooltip showArrow content="This is the tooltip content">
<Button variant="outline" size="sm">
Hover me
</Button>
</Tooltip>
)
}
Placement
Use the positioning.placement prop to change the position of the tooltip.
'use client'
import { Button, Tooltip } from '@saas-ui/react'
export const TooltipWithPlacement = () => {
return (
<Tooltip
content="This is the tooltip content"
positioning={{ placement: 'right-end' }}
>
<Button variant="outline" size="sm">
Hover me
</Button>
</Tooltip>
)
}
Offset
Use the positioning.offset prop to change the offset of the tooltip.
'use client'
import { Button, Tooltip } from '@saas-ui/react'
export const TooltipWithOffset = () => {
return (
<Tooltip
content="This is the tooltip content"
positioning={{ offset: { mainAxis: 4, crossAxis: 4 } }}
>
<Button variant="outline" size="sm">
Hover me
</Button>
</Tooltip>
)
}
Delay
Use the openDelay and closeDelay prop to change the delay of the tooltip.
'use client'
import { Button, Tooltip } from '@saas-ui/react'
export const TooltipWithDelay = () => {
return (
<Tooltip
content="This is the tooltip content"
openDelay={500}
closeDelay={100}
>
<Button variant="outline" size="sm">
Delay (open: 500ms, close: 100ms)
</Button>
</Tooltip>
)
}
Controlled
Use the open and onOpenChange prop to control the visibility of the tooltip.
'use client'
import { useState } from 'react'
import { Button, Tooltip } from '@saas-ui/react'
export const TooltipControlled = () => {
const [open, setOpen] = useState(false)
return (
<Tooltip
content="Tooltip Content"
open={open}
onOpenChange={(e) => setOpen(e.open)}
>
<Button size="sm">{open ? 'Hide' : 'Show'} tooltip</Button>
</Tooltip>
)
}
Interactive
Use the interactive prop to keep the tooltip open when interacting with its
content.
'use client'
import { Button, Tooltip } from '@saas-ui/react'
export const TooltipWithInteractive = () => {
return (
<Tooltip content="This is the tooltip content" interactive>
<Button variant="outline" size="sm">
Hover me
</Button>
</Tooltip>
)
}
Disabled
Use the disabled prop to disable the tooltip. When disabled, the tooltip will
not be shown.
'use client'
import { Button, Tooltip } from '@saas-ui/react'
export const TooltipWithDisabled = () => {
return (
<Tooltip content="This is the tooltip content" disabled>
<Button variant="outline" size="sm">
Hover me
</Button>
</Tooltip>
)
}