HoverCard

Display helpful text or previews inside a dialog when hovering over a link or button.

#
Documentation

#
Usage

Demo of hover trigger inside a block of text.


import { Text } from "@optiaxiom/react";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Text fontSize="md">
      Demo of{" "}
      <HoverCard>
        <HoverCardTrigger
          bg="bg.secondary"
          color="fg.default"
          cursor="pointer"
          fontSize="sm"
          px="12"
          py="4"
          rounded="full"
        >
          hover trigger
        </HoverCardTrigger>
        <HoverCardContent aria-label="Card label">
          <Text>This is the hover card content</Text>
        </HoverCardContent>
      </HoverCard>{" "}
      inside a block of text.
    </Text>
  );
}

#
Anatomy


import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@optiaxiom/react/unstable";
 
export default () => (
  <HoverCard>
    <HoverCardTrigger />
    <HoverCardContent />
  </HoverCard>
);

#
Controlled

Use the open and defaultOpen props to toggle between controlled and uncontrolled usage. And combine it with onOpenChange to listen for changes to the state.

Hover over me

State: closed


"use client";
 
import { Flex, Text } from "@optiaxiom/react";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@optiaxiom/react/unstable";
import { useState } from "react";
 
export function App() {
  const [open, setOpen] = useState(false);
 
  return (
    <Flex flexDirection="row" w="224">
      <HoverCard onOpenChange={setOpen} open={open}>
        <HoverCardTrigger
          bg="bg.secondary"
          color="fg.default"
          cursor="pointer"
          fontSize="sm"
          px="12"
          py="4"
          rounded="full"
        >
          Hover over me
        </HoverCardTrigger>
        <HoverCardContent aria-label="Card label">
          <Text>This is the hover card content</Text>
        </HoverCardContent>
      </HoverCard>
      <Text fontSize="md">State: {open ? "open" : "closed"}</Text>
    </Flex>
  );
}

#
Customize trigger

By default we render an <a> element for the dialog trigger which also accepts all of our Box props.

We can also completely change the trigger by using asChild and passing our own component.


import { Button, Text } from "@optiaxiom/react";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@optiaxiom/react/unstable";
import { IconMailQuestion } from "@tabler/icons-react";
 
export function App() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button
          appearance="subtle"
          aria-label="Information hover"
          icon={<IconMailQuestion />}
        />
      </HoverCardTrigger>
 
      <HoverCardContent>
        <Text>Notification example content</Text>
      </HoverCardContent>
    </HoverCard>
  );
}

#
Props

#
HoverCard

Doesn't render its own HTML element.

Prop
`closeDelay` `number`
`defaultOpen` `false \| true` Default: `false`
`onOpenChange` `(open: boolean) => void`
`open` `false \| true`
`openDelay` `number` Default: `500`

#
HoverCardTrigger

Supports all Box props in addition to its own. Renders an <a> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
HoverCardContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`align` `"center" \| "end" \| "start"` Default: `start`
`alignOffset` `number`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`onEscapeKeyDown` Event handler called when the escape key is down. Can be prevented. `(event: KeyboardEvent) => void`
`onFocusOutside` Event handler called when the focus moves outside of the `HoverCard`. Can be prevented. `(event: FocusOutsideEvent) => void`
`onInteractOutside` 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. `(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`
`onPointerDownOutside` Event handler called when the a `pointerdown` event happens outside of the `HoverCard`. Can be prevented. `(event: PointerDownOutsideEvent) => void`
`side` `"bottom" \| "left" \| "right" \| "top"`
`sideOffset` `number` Default: `4`

#
Changelog

#
1.7.6

Added component