Hover Card

For sighted users to preview content available behind a link.

Usage

Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
 
const {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} = VM.require("uiisnear.near/widget/hoverCard");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <HoverCard>
    <HoverCardTrigger>Hover</HoverCardTrigger>
    <HoverCardContent>
      The Componet Library for NEAR – created by @uiisnear.
    </HoverCardContent>
  </HoverCard>
</Tailwind>

API Reference

HoverCard

Contains all the parts of a hover card.

Prop	Type	Default
defaultOpen	boolean	---
open	boolean	---
onOpenChange	function	---
openDelay	number	700
closeDelay	number	300

HoverCardTrigger

The link that opens the hover card when hovered.

Data attribute	Values
[data-state]	"open" \| "closed"

HoverCardContent

The component that pops out when the hover card is open.

Prop	Type	Default
forceMount	boolean	---
side	enum	"bottom"
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]	"open" \| "closed"
[data-side]	"left" \| "right" \| "bottom" \| "top"
[data-align]	"start" \| "end" \| "center"

Classnames

Classnames available to customize the component.

Function	Classname
HoverCardContent	hoverCardContentClassname

Dropdown Menu Input