@radix-ui/react-hover-card

Basic Hover Card

This example demonstrates a basic hover card setup where additional information is displayed when the user hovers over the trigger element.

```jsx
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@radix-ui/react-hover-card';

function App() {
  return (
    <HoverCard>
      <HoverCardTrigger>Hover over me</HoverCardTrigger>
      <HoverCardContent>
        <div>Additional information displayed on hover</div>
      </HoverCardContent>
    </HoverCard>
  );
}

export default App;
```

Custom Styling

This example shows how to apply custom styles to the hover card components using CSS classes.

```jsx
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@radix-ui/react-hover-card';
import './App.css'; // Assume custom styles are defined here

function App() {
  return (
    <HoverCard>
      <HoverCardTrigger className="custom-trigger">Hover over me</HoverCardTrigger>
      <HoverCardContent className="custom-content">
        <div>Styled additional information</div>
      </HoverCardContent>
    </HoverCard>
  );
}

export default App;
```

Delay Configuration

This example demonstrates how to configure the delay before the hover card opens and closes, providing a smoother user experience.

```jsx
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@radix-ui/react-hover-card';

function App() {
  return (
    <HoverCard openDelay={300} closeDelay={200}>
      <HoverCardTrigger>Hover over me</HoverCardTrigger>
      <HoverCardContent>
        <div>Information with delay</div>
      </HoverCardContent>
    </HoverCard>
  );
}

export default App;
```