Hover Card

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

<HoverCard>
  <span slot="trigger" data-hover-card-trigger style="cursor: pointer;">Hover me</span>
  <div style="min-width: 16rem;"><p>Card content here.</p></div>
</HoverCard>

<!-- Rizzo CSS + hover-card script from package/vanilla docs. data-hover-card-trigger on trigger; content in hover-card__content. Opens on hover. -->

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

<HoverCard>
  <span data-hover-card-trigger style="cursor: pointer;">Hover me</span>
  <div style="min-width: 16rem;"><p>Card content here.</p></div>
</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>