Hover Card

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { HoverCard } from "@dicehub/kappa/components/hover-card";
</script>

<template>
  <HoverCard.Root>
    <HoverCard.Trigger as-child><Button>View solver profile</Button></HoverCard.Trigger>
    <HoverCard.Content>
      <h3>PIMPLE baseline</h3>
      <p>Pressure-velocity coupling · 1,240 iterations · 8.4e-6 residual.</p>
      <a href="/runs/pimple-baseline">Review the full run</a>
    </HoverCard.Content>
  </HoverCard.Root>
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { HoverCard } from "@dicehub/kappa/components/hover-card";

const placements = ["top", "bottom", "left", "right"] as const;
</script>

<template>
  <div class="placements">
    <HoverCard.Root v-for="placement in placements" :key="placement" :open-delay="0" :positioning="{ placement }">
      <HoverCard.Trigger as-child>
        <Button :data-placement-control="placement" size="sm" variant="outline">{{ placement }}</Button>
      </HoverCard.Trigger>
      <HoverCard.Content><h3>{{ placement }} placement</h3><p>Ark UI flips the surface when the viewport is tight.</p></HoverCard.Content>
    </HoverCard.Root>
  </div>
</template>

<style scoped>
.placements {
  display: grid;
  grid-template-areas: ". top ." "left . right" ". bottom .";
  grid-template-columns: repeat(3, minmax(0, 1fr));
  place-items: center;
  gap: 0.75rem 1rem;
}

[data-placement-control="top"] { grid-area: top; }
[data-placement-control="bottom"] { grid-area: bottom; }
[data-placement-control="left"] { grid-area: left; justify-self: start; }
[data-placement-control="right"] { grid-area: right; justify-self: end; }
</style>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { HoverCard } from "@dicehub/kappa/components/hover-card";
</script>

<template>
  <HoverCard.Root :open-delay="0" :close-delay="300">
    <HoverCard.Trigger as-child><Button variant="outline">Immediate preview</Button></HoverCard.Trigger>
    <HoverCard.Content><h3>Fast preview</h3><p>Use a short open delay for a dense comparison table.</p></HoverCard.Content>
  </HoverCard.Root>
</template>

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { HoverCard } from "@dicehub/kappa/components/hover-card";

const open = ref(false);
</script>

<template>
  <Button variant="outline" @click="open = !open">Toggle preview</Button>
  <HoverCard.Root v-model:open="open" :open-delay="0">
    <HoverCard.Trigger as-child><Button>Hover or focus</Button></HoverCard.Trigger>
    <HoverCard.Content><h3>Controlled state</h3><p>The parent owns the open value.</p></HoverCard.Content>
  </HoverCard.Root>
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { HoverCard } from "@dicehub/kappa/components/hover-card";
</script>

<template>
<HoverCard.Root>
  <HoverCard.Trigger as-child><Button>Custom arrow</Button></HoverCard.Trigger>
  <HoverCard.Content>
    <template #arrow>
      <HoverCard.Arrow><HoverCard.ArrowTip /></HoverCard.Arrow>
    </template>
    <h3>Custom arrow slot</h3>
    <p>Replace the default arrow when the surface needs a different visual.</p>
  </HoverCard.Content>
</HoverCard.Root>
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { HoverCard } from "@dicehub/kappa/components/hover-card";
</script>

<template>
<HoverCard.Root :open-delay="0">
  <HoverCard.Trigger as-child><Button>Long preview</Button></HoverCard.Trigger>
  <HoverCard.Content>
    <h3>Convergence notes</h3>
    <p>Long preview text wraps and scrolls inside the available viewport area. Keep the preview useful, but link to the full report for complete logs, tables, and actions.</p>
  </HoverCard.Content>
</HoverCard.Root>
</template>

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { HoverCard } from "@dicehub/kappa/components/hover-card";
</script>

<template>
<HoverCard.Root disabled>
  <HoverCard.Trigger as-child><Button disabled>Unavailable run</Button></HoverCard.Trigger>
  <HoverCard.Content><h3>Unavailable run</h3><p>Validation must pass before this preview is available.</p></HoverCard.Content>
</HoverCard.Root>
</template>