Hacktron Design System

InfoTooltip

An info icon next to a label that explains it in a tooltip.

Dev seats
<template>  <InfoTooltip text="Seats billed per active developer, updated monthly." /></template>

Props

Name Type Default
textstring-
labelstring"More info"

Guidelines

Do

  • Use next to a label or metric to explain what it means, without adding a full description to the layout.
  • Keep the tooltip text short - one line, no interactive content (same rule as Tooltip).

Don't

  • Don't use for essential information - keyboard and touch users may never trigger it.
  • Don't use for an action or a link - a Popover or an inline link is a better fit.