# AnimatedTooltip

> Avatar row with animated tooltips that follow mouse movement.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Feedback
- Tags: tooltip, avatar, animation, hover, team
- Docs: https://fancy-ui.rama.app/docs/components/animated-tooltip
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/animated-tooltip

## Import

```svelte
<script lang="ts">
  import { AnimatedTooltip } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { AnimatedTooltip } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `TooltipItem[]` | — | Array of items with id, name, designation, and image URL |

## Examples

### Basic Usage

```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>
```

### Team Members

```svelte
<script lang="ts">
	import { AnimatedTooltip, type TooltipItem } from "fancy-ui-svelte";

	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>
```