Source: https://app-studio-6167b.web.app/docs/HoverCard

@app-studio/components

# HoverCard

Displays rich content on hover, with customizable trigger and content presentation.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard.tsx)

## Import

```ts
import { HoverCard } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { HoverCard } from '@app-studio/components';
import { Text, Vertical, View } from 'app-studio';
import { Button } from '@app-studio/components';

export const DefaultHoverCard = () => {
  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <View>
        <Text marginBottom={10}>Default HoverCard</Text>
        <HoverCard>
          <HoverCard.Trigger>
            <Button>Hover Me</Button>
          </HoverCard.Trigger>
          <HoverCard.Content>
            <Text>
              The React Framework – created and maintained by @vercel.
            </Text>
          </HoverCard.Content>
        </HoverCard>
      </View>

      <View>
        <Text marginBottom={10}>HoverCard with different positions</Text>
        <HoverCard>
          <HoverCard.Trigger>
            <Button>Hover for Top Position</Button>
          </HoverCard.Trigger>
          <HoverCard.Content side="top">
            <Text>This content appears above the trigger.</Text>
          </HoverCard.Content>
        </HoverCard>
      </View>

      <View>
        <Text marginBottom={10}>HoverCard with custom styling</Text>
        <HoverCard>
          <HoverCard.Trigger>
            <Button variant="outline">Custom Styled HoverCard</Button>
          </HoverCard.Trigger>
          <HoverCard.Content
            views={{
              container: {
                backgroundColor: 'color-blue',
                color: 'color-white',
                borderRadius: '8px',
                padding: '16px',
              },
            }}
          >
            <Text color="white">
              This HoverCard has custom styling with a primary background color-
            </Text>
          </HoverCard.Content>
        </HoverCard>
      </View>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**HoverCard**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L6) |
| `views` | `{ container?: ViewProps; content?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L8) |
| `openDelay` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L15) |
| `closeDelay` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L17) |

### HoverCard.Trigger

**HoverCard.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L22) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L24) |
| `asChild` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L29) |

### HoverCard.Content

**HoverCard.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L36) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L38) |
| `side` | `"bottom" \| "left" \| "right" \| "top"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L43) |
| `align` | `"start" \| "center" \| "end"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L45) |
| `sideOffset` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L47) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.