Hover Card

A hover element card preview.

Frieren: S1E01

Installation

npx cedar-ui@latest add hover-card

or download the following folders to your project:

@/components/cedar-ui/hover-card

Usage

vue
<script setup lang="ts">
import {
  HoverCard,
} from '@/components/cedar-ui/hover-card'

const username = ref('@vue.js')
const description = ref('')
</script>

<template>
  <HoverCard :content="description" scroll-container="window">
      <template #trigger>
          <h2>
              {{ username }}
          </h2>
      </template>
      <template #content>
        {{ description }}
      </template>
  </HoverCard>
</template>
Edit this page on GitHub