Hover Card — React

---
import HoverCard from '../components/astro/HoverCard.astro';
---

<HoverCard triggerLabel="Hover me" client:load>
  <p>Hover card content.</p>
</HoverCard>

<!-- Rizzo CSS + hover-card script. data-hover-card-trigger on trigger. -->
<button data-hover-card-trigger="hc1">Hover</button>
<div id="hc1" class="hover-card__content">...</div>

<script>
  import { HoverCard } from '$lib/rizzo';
</script>

<HoverCard triggerLabel="Hover me">
  <p>Hover card content.</p>
</HoverCard>

<script setup>
import { ref } from 'vue';
import HoverCard from '@/components/rizzo/HoverCard.vue';
import Button from '@/components/rizzo/Button.vue';
</script>

<template>
  <HoverCard v-model:open="open">
    <template #trigger>
      <Button variant="outline">Hover me</Button>
    </template>
    <p>Hover card content.</p>
  </HoverCard>
</template>

import { useState } from 'react';
import { HoverCard, Button } from './components/react';

const [open, setOpen] = useState(false);
<HoverCard open={open} onOpenChange={setOpen} trigger={<Button variant="outline">Hover me</Button>}>
  <p>Hover card content.</p>
</HoverCard>