Feedback Fancy Stable
AnimatedTooltip
Avatar row with animated tooltips that follow mouse movement
Preview
svelte
<script lang="ts">
import { AnimatedTooltip, type TooltipItem } from "fancy-ui-svelte";
const people: TooltipItem[] = [
{
id: 1,
name: "John Doe",
designation: "Software Engineer",
image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop",
},
{
id: 2,
name: "Jane Smith",
designation: "Product Manager",
image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
},
{
id: 3,
name: "Robert Johnson",
designation: "UX Designer",
image: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop",
},
{
id: 4,
name: "Emily Brown",
designation: "Data Scientist",
image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop",
},
];
</script>
<div class="flex justify-center p-6">
<AnimatedTooltip items={people} />
</div>Installation
pnpm add fancy-ui-svelte
import { AnimatedTooltip } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { AnimatedTooltip } from 'fancy-ui-svelte';
</script>
<AnimatedTooltip />Examples
Basic Usage
svelte
<script lang="ts">
import { AnimatedTooltip, type TooltipItem } from "$lib/fancy-ui/animated-tooltip";
const people: TooltipItem[] = [
{
id: 1,
name: "John Doe",
designation: "Software Engineer",
image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop",
},
{
id: 2,
name: "Jane Smith",
designation: "Product Manager",
image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
},
{
id: 3,
name: "Robert Johnson",
designation: "UX Designer",
image: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop",
},
{
id: 4,
name: "Emily Brown",
designation: "Data Scientist",
image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop",
},
];
</script>
<div class="flex justify-center p-6">
<AnimatedTooltip items={people} />
</div>Team Members
svelte
<script lang="ts">
import { AnimatedTooltip, type TooltipItem } from "$lib/fancy-ui/animated-tooltip";
const teamMembers: TooltipItem[] = [
{
id: "a",
name: "Alex Chen",
designation: "CEO & Founder",
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",
},
{
id: "b",
name: "Sarah Wilson",
designation: "CTO",
image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop",
},
{
id: "c",
name: "Michael Lee",
designation: "Lead Developer",
image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop",
},
];
</script>
<div class="flex justify-center p-6">
<AnimatedTooltip items={teamMembers} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items * | TooltipItem[] | - | Array of items with id, name, designation, and image URL |