Hover Card

Basic hover card example demonstrating core behavior.

Package: @solidiom/hover-card
Version: 0.0.1-next.0
Status: stable

Examples

import * as HoverCard from "@solidiom/hover-card"

;<HoverCard.Root openDelay={700} closeDelay={300}>
  <HoverCard.Trigger>
    <a href="/profile">@johndoe</a>
  </HoverCard.Trigger>

  <HoverCard.Content>
    <div style={{ padding: 16 }}>
      <strong>John Doe</strong>
      <p style={{ margin: "8px 0 0" }}>Software developer. Building things with Solid.</p>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

The hover card shows content after a configurable openDelay (default 700ms) when the trigger is hovered. The closeDelay (default 300ms) prevents flicker when moving between trigger and content.

View source

        /**
 * @solidiom/hover-card — Content preview on hover.
 *
 * Parts: Root, Trigger, Content.
 */

export {
  Root,
  Trigger,
  Content,
  type HoverCardRootProps,
  type HoverCardTriggerProps,
  type HoverCardContentProps,
} from "./hover-card"

export { type PositioningPort } from "./hover-card-context"