Tooltip FigmaFigma Code Connected

Honeycomb offers a tooltip component that is entirely CSS-based. Tooltips do not require JavaScript and rely solely on a wrapper element, .hc-tooltip-group, and a hover event on that element.

Default behavior

The only requirements to get a default tooltip positioned on the top of any element is to add a .hc-tooltip directly below the triggering element, and to wrap both inside of a .hc-tooltip-group element.

Tooltips have a default transition duration of 200ms, delay of 300ms, and a very subtle drop shadow. Currently these are not possible to override.

<div class="hc-tooltip-group">
  <button class="hc-button hc-button--primary" type="button">Default tooltip</button>
  <div class="hc-tooltip hc-tooltip--top" aria-role="tooltip">
    Default tooltip
  </div>
</div>

Accessibility Note

• Role: The tooltip itself (the element with class .hc-tooltip) should always have role="tooltip" added.
• Consider adding a unique id to the tooltip and then aria-describedby="{id}" to the element that triggers that tooltip.

Tooltip directions

Position the tooltip in any of 4 directions: top, bottom, left, and right. The tooltip will appear centered based on that direction, and the tooltip’s arrow is handled automatically.

The tooltip position should be determined by the position of the element on the screen. For the most part, unless an element is on the far right, left, or bottom of the viewport, the bottom tooltip should be the default unless it blocks related content in this case the position should be reconsidered

<div class="hc-tooltip-group">
  <button class="hc-button hc-button--connect hc-button--primary" type="button">Top tooltip</button>
  <div class="hc-tooltip hc-tooltip--top" aria-role="tooltip">
    Tooltip on top
  </div>
</div>
<div class="hc-tooltip-group">
  <button class="hc-button hc-button--connect hc-button--secondary" type="button">Bottom tooltip</button>
  <div class="hc-tooltip hc-tooltip--bottom" aria-role="tooltip">
    Tooltip on bottom
  </div>
</div>
<div class="hc-tooltip-group">
  <div class="hc-relative">
    <img src="https://ui-avatars.com/api/?background=random&name=James+Gioia" class="rounded-full w-12 h-12" alt="James Gioia's avatar">
    <span class="hc-indicator-status hc-indicator--success hc-indicator--bottom-right">
  </div>
  <div class="hc-tooltip hc-tooltip--left" aria-role="tooltip">
    Tooltip on left
  </div>
</div>
<div class="hc-tooltip-group">
  <i class="hc-icon hc-icon--adjustment hc-icon--32"></i>
  <div class="hc-tooltip hc-tooltip--right" aria-role="tooltip">
    Tooltip on right
  </div>
</div>

Right and left alignment

For top and bottom Tooltips, you can optionally push the Tooltip and it’s arrow to the right or left. This should only be done as-needed when the triggering element is at the far left or right of the screen and you need a left- or right-aligned Tooltip.

Append the class .hc-tooltip--align-left or .hc-tooltip--align-right to a top or bottom tooltip to achieve this effect.

<div class="hc-tooltip-group">
  <button class="hc-button hc-button--primary" type="button">Right-aligned top</button>
  <div class="hc-tooltip hc-tooltip--top hc-tooltip--align-right" aria-role="tooltip">
    I'm altering the deal
  </div>
</div>
<div class="hc-tooltip-group">
  <button class="hc-button hc-button--primary" type="button">Left-aligned bottom</button>
  <div class="hc-tooltip hc-tooltip--bottom hc-tooltip--align-left" aria-role="tooltip">
    It's a trap! 
  </div>
</div>

Accessibility guidelines

Tooltips open both on hover and focus states, which support both mouse and keyboard use. More specifically, .hc-tooltip-group has two pseudo-classes: :focus and :focus-within.

The margin between the tooltip and its triggering element is 4px.

When to use tooltips

Use tooltips for additional non-critical information on an element. Other specific use cases include:

• Clarifying icons or abbreviations that don’t have labels
• Explaining jargon or technical terms in plan language
• Offering optional details that enhance understanding but aren’t required for the task.

Examples include a question mark icon that reveals extra details about a setting, or a tooltip on an unlabeled icon that explains it’s function. In the later case, the icon itself should have this value as it’s aria-label.

When not to use tooltips

Don’t use tooltips for essential information that is vital to task completion! If the guidance is critical, it should be visible without interaction. Err on the side of displaying the information on screen.

Examples of when not to use a tooltip include password requirements or format rules (like phone numbers or dates).

When information is essential, use microcopy instead of a tooltip. Microcopy is inline text that is always visible, making it more accessible and ensuring users have what they need then. A number of components, like checkbox groups or stacked form inpits, use microcopy effectively.

What kind of information should the tooltip provide?

Keep the information brief, helpful, and as short as possible while still communicating the message.

If the message becomes too long, consider creating a line break so the text spans two lines; this helps with readability, prevents the tooltip from blocking other interface components, and prevents it from hitting the side of the browser.

Tooltip direction

Chose the tooltip’s direction based on the triggering element’s position on the screen.

For the most part, unless an element is on the far right, left, or bottom of the viewport, the top tooltip should be the default unless it blocks related content. In this case reconsider the position to the opposite direction.