Animated Tooltip

Source code

Click here View source code for Animated Tooltip to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Anatomy

Pass a list of items to the component. Each item should contain an image, title, and optionally a description.

Animated Tooltip Anatomy

<template>
  <div class="flex">
    <UiAnimatedTooltip :items />
  </div>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: "1",
      title: "John Doe",
      description: "Software Engineer",
      image: "https://i.pravatar.cc/150?img=1",
    },
    // ... more items
  ];
</script>

Installation

Usage

Basic

Display a group of avatars with animated tooltips that appear on hover. The tooltips follow mouse movement with smooth spring animations.

Preview Code

Without Description

You can omit the description field to show only the title in the tooltip.

Preview Code

Large Group

The component works well with larger groups of people. The avatars automatically stack with negative margin.

Preview Code

Features

• Dynamic Animation: Tooltips animate in with smooth spring physics using Motion V
• Mouse Tracking: Tooltips rotate and translate based on mouse position for a natural feel
• Auto-generated IDs: If no ID is provided, the component automatically generates unique IDs
• Flexible Content: Support for title and optional description in tooltips
• Stacked Layout: Avatars stack with negative margin for a compact group display
• Hover Effects: Smooth scale and z-index transitions on hover

Props

The component accepts an items prop with the following interface:

interface Item {
  id?: string; // Optional: Auto-generated if not provided
  title: string; // Required: Displayed in tooltip
  description?: string; // Optional: Secondary text in tooltip
  image: string; // Required: Avatar image URL
}

Customization

You can customize the component by modifying the styles directly in the component file:

• Avatar size: Change size-14 class on the image element
• Tooltip styling: Modify the tooltip container classes
• Animation parameters: Adjust stiffness and damping in the Motion component
• Gradient colors: Update the via-emerald-500 and via-sky-500 classes for different accent colors