HoverCard – Once UI

The HoverCard component is a syntactic sugar for the Animation component with a handful of smart defaults to display additional information about an element when hovered or focused.

Tooltip, InfoTip or HoverCard

Tooltip is a short text label on hover or focus, usually set through a component's tooltip prop. InfoTip is an info icon that explains a label or setting in a sentence or two. HoverCard opens a card of rich content, such as a profile or a link preview, next to its trigger. 3.0 plans to consolidate them.

HoverCard

<HoverCard
  placement="top"
  trigger={<Avatar size="l" src="/images/avatar.jpg" tabIndex={0} />}
>
<Column padding="20" gap="20" radius="l" maxWidth={24} background="page" border href="https://lorant.one">
  <Row gap="20" fillWidth vertical="center">
    <Avatar size={3} src="/images/avatar.jpg" />
    <Column gap="4">
      <Text variant="heading-strong-m">Lorant One</Text>
      <Text variant="body-default-s" onBackground="neutral-weak">
        Design Engineer
      </Text>
    </Column>
  </Row>
  <Text variant="body-default-s" onBackground="neutral-weak">
    Published 100k+ lines of open-source code. Author of The Dopler Method, The Design Dividend, and Learn anything.
  </Text>
  <Row gap="8" wrap>
    <Tag>Design</Tag>
    <Tag>Frontend</Tag>
    <Tag>Writing</Tag>
  </Row>
</Column>
</HoverCard>

API reference

	Type	Default
…and every AnimationProps prop	inherited	—