Tooltip

JSThis component requires JavaScript.

A short, contextual message that appears on hover or focus of an element, powered by the Context Menu component.

Tooltips display additional information that is contextual, helpful, and nonessential in order to give clarity to a user. It appears upon hover or focus of an element without disrupting the experience.

Example

Additional information

<div
  class="bux-tooltip__trigger bux-popover__trigger"
  style="display: inline-block"
  tabindex="0"
>
  <span
    class="icon icon-info-circle"
    role="img"
    aria-label="More information on this item"
  ></span>
  <div class="bux-popover__container bux-tooltip__container" role="tooltip">
    <div class="bux-popover__caret">
      <svg viewBox="0 0 10 10">
        <path class="caret--chevron"></path>
      </svg>
    </div>
    <div class="bux-popover__body">Additional information</div>
  </div>
</div>

{#
Buckeye UX - version 1.3.1
Copyright (C) 2025 The Ohio State University
#}

{% if container_position == 'left' or container_position == 'right' %}
  {% set container_position_class = ' container--position-' ~ container_position ~ '-of-trigger' %}
{% elseif container_position == 'above' or container_position == 'below' %}
  {% set container_position_class = ' container--position-' ~ container_position ~ '-trigger' %}
{% else %}
  {% set container_position_class = '' %}
{% endif %}

{% if container_align_to_caret %}
  {% set container_caret_class = ' container--align-caret-' ~ container_align_to_caret %}
{% elseif container_justify_to_caret %}
  {% set container_caret_class = ' container--justify-caret-' ~ container_justify_to_caret %}
{% else %}
  {% set container_caret_class = '' %}
{% endif %}

{% if caret_justify_to_trigger %}
  {% set caret_class = ' caret--justify-trigger-' ~ caret_justify_to_trigger %}
{% elseif caret_align_to_trigger %}
  {% set caret_class = ' caret--align-trigger-' ~ caret_align_to_trigger %}
{% else %}
  {% set caret_class = '' %}
{% endif %}

<div class="bux-tooltip__trigger bux-popover__trigger"{% if stay_open == "true" %} data-stay-open="true"{% endif %} style="display: inline-block;" tabindex="0">
  <span class="icon icon-{{ trigger_icon }}" role="img" aria-label="{{ label }}"></span>
  <div class="bux-popover__container bux-tooltip__container{{ container_position_class }}{{ container_caret_class }}" role="tooltip">
    <div class="bux-popover__caret {{ caret_class }}">
      <svg viewBox="0 0 10 10">
        <path class="caret--chevron"></path>
      </svg>
    </div>
    <div class="bux-popover__body">
      {{ text }}
    </div>
  </div>
</div>

Usage

Dos

• Use short and precise text within a Tooltip, such as a one- to two-word description of the button or icons’s function.

Don’ts

• Since a tooltip disappears when a user hovers away, do not include pertinent information for the user to complete their task. Instead, use text that is always visible and accessible for vital information, such as required fields.
• Do not use interactive elements within a tooltip, such as an inline link.

Accessibility

The main point: tooltips should be hidden from assistive technologies because their information should already be provided to assistive technologies through another method.

Explanation: tooltips typically contain information to clarify a visual shorthand -- for example, hovering over an eye icon in a password input text field displays a tooltip with the text 'show password'. Since this information should already be conveyed to assistive technologies through visually hidden text, aria-label, or other means, the tooltip element should be hidden from assistive technology to avoid reading out the same information twice.