Author Tooltip
An interactive avatar with tooltip showing author information and social links.
An interactive avatar with tooltip showing author information and social links.
Instant context on who you're talking to. Hover any avatar to see profile details without leaving the chat.
npx shadcn@latest add https://bungas.treonstudio.com/r/author-tooltip.jsonimport { AuthorTooltip } from "@/components/ui/author-tooltip";
export default function Example() {
const author = {
name: "Aryan",
avatar: "https://github.com/aryanranderiya.png",
role: "Founder & CEO",
github: "https://github.com/aryanranderiya",
twitter: "https://twitter.com/aryanranderiya",
linkedin: "https://linkedin.com/in/aryanranderiya",
};
return <AuthorTooltip author={author} />;
}You can pass a custom trigger element instead of the default avatar:
<AuthorTooltip
author={author}
trigger={<button>Hover me</button>}
/>Add extra content inside the tooltip with the children prop:
<AuthorTooltip author={author}>
<div className="text-xs">
<p>Commits: 150</p>
<p>Additions: +5,000</p>
</div>
</AuthorTooltip>| Prop | Type | Default | Description |
|---|---|---|---|
| author | Author | - | Author information object |
| avatarSize | "sm" | "md" | "lg" | "xl" | "sm" | Size of the avatar |
| avatarClassName | string | "cursor-help border-2 border-border" | Additional CSS classes for avatar |
| trigger | ReactNode | - | Custom trigger element (replaces avatar) |
| children | ReactNode | - | Additional content to render in tooltip |
| Property | Type | Required | Description |
|---|---|---|---|
| name | string | Yes | Author's full name |
| avatar | string | Yes | URL to author's avatar image |
| role | string | Yes | Author's role or title |
| github | string | No | GitHub profile URL |
| string | No | Twitter/X profile URL | |
| string | No | LinkedIn profile URL |