Overlays & Tooltips

Author Tooltip

Server Component

Hover an avatar to see name, role, and profile links.

Import

tsx

import { AuthorTooltip } from "@cronus-ui/ui";

bash

npx cronus-ui add author-tooltip

Examples

Profile

Hover the avatar to see name, role, and profile links. Pass `trigger` to wrap any element.

tsx

<AuthorTooltip
  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",
  }}
/>

Sizes

`sm`, `md`, `lg`, and `xl` size the trigger avatar.

AAA

tsx

<div className="flex items-center gap-3">
  <AuthorTooltip author={author} avatarSize="sm" />
  <AuthorTooltip author={author} avatarSize="md" />
  <AuthorTooltip author={author} avatarSize="lg" />
</div>

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

AuthorTooltipLabels

Prop	Type	Default	Description
`github`*	`string`	—	—
`twitter`*	`string`	—	—
`linkedin`*	`string`	—	—

AuthorTooltipProps

Extends VariantProps<typeof authorTooltipAvatarVariants>

Prop	Type	Default	Description
`author`*	`Author`	—	—
`avatarSize`	`"sm" \| "md" \| "lg" \| "xl"`	—	—
`avatarClassName`	`string`	—	—
`trigger`	`ReactNode`	—	—
`children`	`ReactNode`	—	Contents of the component.
`labels`	`Partial<AuthorTooltipLabels>`	—	Override default English strings.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"sm"`	One of "sm" \| "md" \| "lg" \| "xl".
`asChild`	`boolean`	—	Render as the child element via Slot.
`className`	`string`	—	Additional class names merged onto the root.