Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Usage
Import the component. It's mandatory to wrap the whole component with the Tailwind tag.
const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const {
TooltipProvider,
TooltipR,
TooltipTrigger,
TooltipContent,
tooltipContentClassname,
} = VM.require("uiisnear.near/widget/tooltip");
if (Tailwind == undefined) return "";<Tailwind>
<TooltipProvider>
<TooltipR>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</TooltipR>
</TooltipProvider>
</Tailwind>API Reference
TooltipProvider
Wraps your app to provide global functionality to your tooltips.
| Prop | Type | Default |
|---|---|---|
delayDuration | number | 700 |
skipDelayDuration | number | 300 |
disableHoverableContent | boolean | --- |
TooltipR
Contains all the parts of a tooltip.
| Prop | Type | Default |
|---|---|---|
defaultOpen | boolean | --- |
open | boolean | --- |
onOpenChange | function | --- |
delayDuration | number | 700 |
disableHoverableContent | boolean | --- |
TooltipTrigger
The button that toggles the tooltip. By default, the Tooltip.Content will position itself against the trigger.
| Data attribute | Values |
|---|---|
| [data-state] | "closed" | "delayed-open" | "instant-open" |
TooltipContent
The component that pops out when the tooltip is open.
| Prop | Type | Default |
|---|---|---|
aria-label | string | --- |
onEscapeKeyDown | function | --- |
onPointerDownOutside | function | --- |
forceMount | boolean | --- |
side | enum | "top" |
sideOffset | number | 0 |
align | enum | "center" |
alignOffset | number | 0 |
avoidCollisions | boolean | true |
collisionBoundary | Boundary | [] |
collisionPadding | number | Padding | 0 |
arrowPadding | number | 0 |
sticky | enum | "partial" |
hideWhenDetached | boolean | false |
| Data attribute | Values |
|---|---|
| [data-state] | "closed" | "delayed-open" | "instant-open" |
| [data-side] | "left" | "right" | "bottom" | "top" |
| [data-align] | "start" | "end" | "center" |
Classnames
Classnames available to customize the component.
| Function | Classname |
|---|---|
| TooltipContent | tooltipContentClassname |