DitherCharts

Hover card

Updated

HoverCard previews a link or button in a paper card on a dithered shadow. It opens after a delay on mouse hover or at once on keyboard focus, flips and slides to stay on screen, and, unlike Tooltip, holds links: Tab moves into it, and Escape closes it. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Every chart reads its colors from the chart config.

import "@/components/dithercharts/controls.css"
import { HoverCard } from "@/components/dithercharts/hover-card"

<HoverCard
  openDelay={500}
  closeDelay={300}
  content={
    <>
      <strong>Chart config</strong>
      <span>One object for a chart's series, labels and colors.</span>
      <a href="/docs/chart-config">Read the Chart config docs</a>
    </>
  }
>
  <a href="/docs/chart-config">the chart config</a>
</HoverCard>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add hover-card

Props

It renders a native element, so every other attribute that element takes passes through.

HoverCard props
PropTypeDefaultDescription
contentrequiredType ReactNodeDefault –The preview, which can hold links and buttons: Tab moves from the trigger into it. In a paragraph, use spans, not p or div.
childrenrequiredType ReactNodeDefault –The link or button it previews.
openDelayType numberDefault 500Ms the mouse rests on the trigger before the card opens; keyboard focus opens it at once.
closeDelayType numberDefault 300Ms the card stays after the mouse leaves, so it can cross into the card.
collisionPaddingType { top?: number }Default 8Space in px the card keeps clear at the window's top, e.g. a sticky header's height; it flips below to keep it.
classNameType stringDefault –