Hover

The Hover component displays content in a card that appears when hovering over a trigger element. It provides a flexible way to show additional information or actions without requiring a click.

Demo

React

Vue

Usage

React

import {
  Button,
  Hover,
} from '@fintech-sandpit/ui/react';

function MyComponent() {
  return (
    <Hover.Root
      positioning={{
        placement: 'right',
        gutter: 12,
        offset: { mainAxis: 0, crossAxis: 0 },
      }}
    >
      <Hover.Trigger asChild>
        <Button colorScheme="primary">
          Hover me
        </Button>
      </Hover.Trigger>

      <Hover.Content>
        <div>
          <h3>Hover Card Title</h3>
          <p>This is the hover card content.</p>
        </div>
      </Hover.Content>
    </Hover.Root>
  );
}

Vue

<script setup lang="ts">
import {
  Button,
  Hover,
} from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Hover.Root
    :positioning="{
      placement: 'right',
      gutter: 12,
      offset: { mainAxis: 0, crossAxis: 0 },
    }"
  >
    <Hover.Trigger as-child>
      <Button color-scheme="primary">
        Hover me
      </Button>
    </Hover.Trigger>

    <Hover.Content>
      <div>
        <h3>Hover Card Title</h3>
        <p>This is the hover card content.</p>
      </div>
    </Hover.Content>
  </Hover.Root>
</template>

Props

Hover Root Props

React

Name	Type	Required	Default	Description
openDelay	number		700	Delay in milliseconds before opening the hover card
closeDelay	number		300	Delay in milliseconds before closing the hover card
open	boolean			Whether the hover card is open (controlled)
defaultOpen	boolean		false	Whether the hover card is open by default (uncontrolled)
positioning	PositioningOptions			Positioning options for the hover card. See PositioningOptions type below.

Vue

Name	Type	Required	Default	Description
open-delay	number		700	Delay in milliseconds before opening the hover card
close-delay	number		300	Delay in milliseconds before closing the hover card
open	boolean			Whether the hover card is open (controlled)
default-open	boolean		false	Whether the hover card is open by default (uncontrolled)
positioning	PositioningOptions			Positioning options for the hover card. See PositioningOptions type below.

Hover Trigger Props

React

Name	Type	Required	Default	Description
asChild	boolean		false	When true, merges props with the child element instead of rendering a wrapper

Vue

Name	Type	Required	Default	Description
as-child	boolean		false	When true, merges props with the child element instead of rendering a wrapper

Events

React

Name	Arguments	Description
onOpenChange	(details: { open: boolean }) => void	Callback fired when open state changes

Vue

Name	Arguments	Description
@open-change	(details: { open: boolean }) => void	Callback fired when open state changes

Types

type PositioningOptions = {
  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
  gutter?: number
  offset?: { mainAxis?: number; crossAxis?: number }
}

Components

Hover.Root

The root component that manages the hover card state and provides context to child components. Supports both controlled and uncontrolled usage.

Hover.Trigger

The element that triggers the hover card when hovered over. Use asChild prop to merge props with a child element.

Hover.Content

The main content container for the hover card. Automatically includes positioning and portal rendering.