Tooltip

A tooltip is a message box that is displayed when a user hovers over, or gives focus to, an interactive UI element. The tooltip provides additional information about the action item it is paired with.

• Interactive Playground
• Anatomy
• Positioning
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various tooltip styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div class="neo-tooltip neo-tooltip--up neo-tooltip--onhover">
  <button
    aria-describedby="tooltip-div-id"
    class="neo-btn neo-btn--default neo-btn-primary neo-btn-primary--default"
  >
    Hover me to see a tooltip
  </button>
  <div
    id="tooltip-div-id"
    role="tooltip"
    class="neo-tooltip__content"
  >
    <div class="neo-arrow">
    </div>
    Tooltip text provides additional information about the attached UI element.
  </div>
</div>

<Tooltip
  label="Tooltip text provides additional information about the attached UI element."
  position="top"
  multiline={false}
>
  <Button>Hover me to see a tooltip</Button>
</Tooltip>

An action item in the UI may include a tooltip that appears when the item has focus. The tooltip text explains in more detail what the action item will do when selected, or what type of information is required.

• Container:

  The tooltip text is white and appears within a black container near the action item.

• Text Block:

  This is the text for the tooltip. It can be one or more lines, but it should be brief.

• Tooltip Anchor:

  The anchor arrow points toward the action item associated with the tooltip.

Position the tooltip so that it does not obscure the action item it is associated with. Try to keep the tooltip away from other UI elements, particularly other action items.

Placement

The tooltip can appear to the right, left, top or bottom of the action item. The anchor can also be offset toward the corner of the container. Select the correct placement so that the tooltip does not cover the action item or any other interactive field. The tooltip text is left justified within the container.

• Left:

  The tooltip appears to the left of the action item at about the same level. The container is vertically centered around the anchor.

• Top:

  The tooltip appears above the action item and is centered horizontally around the anchor.

• Bottom:

  The tooltip appears beneath the action item and is centered horizontally around the anchor.

• Right:

  The tooltip appears to the right of the action item at about the same level. The container is vertically centered around the anchor.

For tooltips set to top or bottom, the anchor can be moved to the left or right corner of the container. Use this feature to prevent the tooltip from blocking another field, or where space limitations exist.

A tooltip is a message box that is displayed when a user hovers over or gives focus to, an interactive UI element. The tooltip provides additional information about what it does or what information is required.

DO: Use basic tooltips by default. Off center tooltips can be used when there is limited space.

DON'T: Do not mix and match the placement of the tooltip within the same component.

DO: Put all critical instructions and labels directly onto the UI.

DON'T: Do not put important instructions into a tooltip.

DO: Use tooltips only when the associated text cannot be displayed on the screen.

DON'T: Do not substitute tooltips for helper text.

DO: Use tooltips to display the full content when it is too large to be shown in the allocated space.

DON'T: Do not use tooltips within navigation items. Instead, either expand the item to show all of the text, or wrap it onto multiple lines.

DO: Use concise wording to describe the action or the state.

DON'T: Do not describe the visual appearance of the element.

DO: Open tooltips in appropriate positions.

DON'T: Do not add Tooltips where they cover other related content

DO: Multiline text is applied when the container width exceeds 300 pixels.

DON'T: Do not create unusually large tooltips with one line of text. Use multiline tooltips instead.

Single line tooltips are 32 pixels in height not including the anchor. Tooltips will detect the edges of the browser to be properly placed in the window so the container does not get cutoff and the anchor is correctly positioned.

If the text makes the tooltip wider than 300 pixels, it will automatically wrap to a new line. All text is left aligned regardless of the tooltip position or anchor direction.

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users. Tooltips will be displayed as each interactive element receives focus.

Keyboard navigation employs the following shortcuts.

Components

• Button
• Header