Tooltip Figma 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">
        <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>

Design considerations

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 be 4px.

When to use a tooltip?

Use tooltips for additional guidance and to drive user action.

Don’t use tooltips for essential information that is vital to task completion. For example, provide tooltips for unlabeled icons but don’t use them for instructions on filling in passwords.

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 bottom tooltip should be the default unless it blocks related content; in this case reconsider the position to the opposite direction.