HoverCard

Example

import { CalendarDays } from "lucide-react"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  Button,
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@databricks/appkit-ui/react"

export default function HoverCardExample() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="flex items-center pt-2">
              <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
              <span className="text-xs text-muted-foreground">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

HoverCard

Source: packages/appkit-ui/src/react/ui/hover-card.tsx

Props

Prop	Type	Required	Default	Description
open	boolean		-	-
defaultOpen	boolean		-	-
onOpenChange	((open: boolean) => void)		-	-
openDelay	number		-	-
closeDelay	number		-	-

Usage

import { HoverCard } from '@databricks/appkit-ui';

<HoverCard /* props */ />

HoverCardContent

Source: packages/appkit-ui/src/react/ui/hover-card.tsx

Props

Prop	Type	Required	Default	Description
forceMount	true		-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
onEscapeKeyDown	((event: KeyboardEvent) => void)		-	Event handler called when the escape key is down. Can be prevented.
onPointerDownOutside	((event: PointerDownOutsideEvent) => void)		-	Event handler called when the a pointerdown event happens outside of the HoverCard. Can be prevented.
onFocusOutside	((event: FocusOutsideEvent) => void)		-	Event handler called when the focus moves outside of the HoverCard. Can be prevented.
onInteractOutside	((event: FocusOutsideEvent | PointerDownOutsideEvent) => void)		-	Event handler called when an interaction happens outside the HoverCard. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.
asChild	boolean		-	-
align	enum		-	-
side	enum		-	-
sideOffset	number		-	-
alignOffset	number		-	-
arrowPadding	number		-	-
avoidCollisions	boolean		-	-
collisionBoundary	Boundary | Boundary[]		-	-
collisionPadding	number | Partial<Record<"left" | "right" | "top" | "bottom", number>>		-	-
sticky	enum		-	-
hideWhenDetached	boolean		-	-
updatePositionStrategy	enum		-	-

Usage

import { HoverCardContent } from '@databricks/appkit-ui';

<HoverCardContent /* props */ />

HoverCardTrigger

Source: packages/appkit-ui/src/react/ui/hover-card.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-

Usage

import { HoverCardTrigger } from '@databricks/appkit-ui';

<HoverCardTrigger /* props */ />