Tooltip
Floating element that provides a control with contextual information via pointer or focus.
Installation
npm @momo-ui add tooltipUsage
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@momo-webplatform/mobase/components/Tooltip/Tooltip";<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button>Quyên góp</Button>
</TooltipTrigger>
<TooltipContent>
Cám ơn sự ủng hộ của bạn
<TooltipArrow />
</TooltipContent>
</Tooltip>
</TooltipProvider>API Reference
Tooltip
| Prop | Type | Default | Required |
open | enumboolean | -- | false |
defaultOpen | enumboolean | -- | false |
onOpenChange | (open: boolean) => void | -- | false |
delayDuration | number | -- | false |
disableHoverableContent | enumboolean | -- | false |
TooltipTrigger
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
TooltipContent
| Prop | Type | Default | Required |
aria-label | string | -- | false |
asChild | enumboolean | -- | false |
side | enumtop | right | bottom | left | -- | false |
sideOffset | number | 4 | false |
align | enumcenter | start | end | -- | false |
alignOffset | number | -- | false |
arrowPadding | number | -- | false |
avoidCollisions | enumboolean | -- | false |
collisionBoundary | enumElement | Element[] | -- | false |
collisionPadding | enumnumber | Partial<Record<top | right | bottom | left, number>> | -- | false |
sticky | enumpartial | always | -- | false |
hideWhenDetached | enumboolean | -- | false |
updatePositionStrategy | enumalways | optimized | -- | false |
forceMount | true | -- | false |
onEscapeKeyDown | (event: KeyboardEvent) => void | -- | false |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | -- | false |
type | enumdark | light | dark | false |
TooltipProvider
| Prop | Type | Default | Required |
delayDuration | number | -- | false |
skipDelayDuration | number | -- | false |
disableHoverableContent | enumboolean | -- | false |
TooltipArrow
| Prop | Type | Default | Required |
className | string | -- | false |
asChild | enumboolean | -- | false |
Example
Tooltip type
You can use choose between dark and light version styles for the tooltip component with type.
Placement
The positioning of the tooltip element relative to the triggering element can be set using the side prop.