Tooltip

Tooltips are a convenient way to show contextual help of information without taking the user out of the current context.

General Guidelines

Tooltips display additional, contextual information about an element or feature. They are usually preceded by a visual trigger, like an information icon. When a user hovers their cursor over the icon or the area it describes, the tooltip dynamically opens in the appropriate direction to display the helpful text in an unobtrusive way.

Tooltips are limited to text only and as a best practice are limited to desktop interfaces. Note that as we begin to develop more patterns for the Native environment, a downward tooltip will be used for long-press shortcut menus.

Placement

For layout purposes, avoid having tooltips open on top of pertinent content or information. Instead, tooltips should dynamically open in the best direction to minimize the intrusion. In the following cases the tooltips should open as described:

  • If the trigger is at the top of the screen – the tooltip should open downward below the icon.
  • If the trigger is at the bottom of the screen – the tooltip should open upward above the icon.
  • If the trigger is at the edge of the fixed width, the tooltip should open accordingly.

Voice and Tone

Tooltip content is concise and scannable, and describes or explains the element or feature it pertains to in a helpful manner.

Grammar and Mechanics

  • Tooltips should be sentence case.
  • Tooltips should consist of no more than 140 characters. In instances where more than 140 characters are needed, consider using a dialog or a drawer.
  • Tooltips have tails or carets pointing at the icon or area associated with the element.

Usage

Configurations When
Use a tooltip When you need to explain an element with more text than the element’s area can accommodate.
Use a tooltip When you need to provide additional information in a way that stands out.

Do's and Don'ts

Do use sentence case
Don’t use more than 140 characters
Don’t open the tooltip in a way that obscures important information
Tooltips are a convenient way to show contextual help of information without taking the user out of the current context.

Coming soon...

Please enjoy a cat while you wait

Tooltips are a convenient way to show contextual help of information without taking the user out of the current context.

Examples

For details on when to use this component, please see the Usage tab. Need something more advanced? Want something that opens on click? Check out the Popover Component.

Basic Example

Appending the attribute data-tooltip-content to an element with some text content will create a tooltip element that shows up on hover or focus.

<button class="iris-button iris-button--primary" type="button" data-tooltip-content="This tooltip will show on hover or focus.">
    <span class="iris-button__text">Hover For Tooltip</span>
</button>

Tooltip Position

By specifying the attribute data-placement with values default, left, right, top, or bottom you can tell the tooltip to prefer attaching to one of these sides of the element.

<!-- Position to the Left -->
<button class="iris-button iris-button--primary" type="button" data-tooltip-content="To the left! To the left!" data-placement="left">
    <span class="iris-button__text">Show Left Tooltip</span>
</button>

<!-- Position to the Right -->
<button class="iris-button iris-button--primary" type="button" data-tooltip-content="To the right! To the right!" data-placement="right">
    <span class="iris-button__text">Show Right Tooltip</span>
</button>

<!-- Position Above -->
<button class="iris-button iris-button--primary" type="button" data-tooltip-content="To the top!" data-placement="top">
    <span class="iris-button__text">Show Top Tooltip</span>
</button>

<!-- Position Below -->
<button class="iris-button iris-button--primary" type="button" data-tooltip-content="To the bottom!" data-placement="bottom">
    <span class="iris-button__text">Show Bottom Tooltip</span>
</button>

Tooltip Indicator

By specifying the attribute data-indicator with values auto, start, center, end, or none, you can control the position of the caret that attaches to the element.

<!-- Indicator Start -->
<button class="iris-button iris-button--primary" type="button" data-tooltip-content="Indicator is at the start." data-placement="top" data-indicator="start">
    <span class="iris-button__text">Show Tooltip</span>
</button>

<!-- Indicator Center -->
<button class="iris-button iris-button--primary" type="button" data-tooltip-content="Indicator is in the center." data-placement="top" data-indicator="center">
    <span class="iris-button__text">Show Tooltip</span>
</button>

<!-- Indicator End -->
<button class="iris-button iris-button--primary" type="button" data-tooltip-content="Indicator is at the end." data-placement="top" data-indicator="end">
    <span class="iris-button__text">Show Tooltip</span>
</button>

<!-- Indicator None -->
<button class="iris-button iris-button--primary" type="button" data-tooltip-content="Indicator? What indicator?" data-placement="top" data-indicator="none">
    <span class="iris-button__text">Show Tooltip</span>
</button>

Tooltip Sizes

Giving the element with data-tooltip-content the attribute data-size will give the tooltop a specific width. You can specify small, medium, or large. This is useful when you have a particularly long tooltip and want it to show on more than one line. Otherwise the tooltip will continue on one line until the space available is used entirely, and then truncate.

<!-- Small Tooltip -->
<button class="iris-button iris-button--primary" type="button" data-placement="top" data-size="small"
    data-tooltip-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
    <span class="iris-button__text">Show Tooltip</span>
</button>

<!-- Medium Tooltip -->
<button class="iris-button iris-button--primary" type="button" data-placement="top" data-size="medium"
    data-tooltip-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
    <span class="iris-button__text">Show Tooltip</span>
</button>

<!-- Large Tooltip -->
<button class="iris-button iris-button--primary" type="button" data-placement="top" data-size="large"
    data-tooltip-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
    <span class="iris-button__text">Show Tooltip</span>
</button>

Other Elements

Tooltips can be put on any element. Doing so makes that element a tab stop. Be aware of this and make sure that the element can stand alone and make sense when it is a tab stop. Here are some examples of other elements with tooltips.

Hover for Tooltip
Hover for Tooltip

Hover for Tooltip
<!-- Span -->
<span data-tooltip-content="I'm a tooltip!" >Hover for Tooltip</span>
<!-- Anchor -->
<a data-tooltip-content="I'm a tooltip!" href="#">Hover for Tooltip</a>
<!-- Input -->
<input type="text" data-tooltip-content="I'm a tooltip!" placeholder="Hover for Tooltip"/>
<!-- Div -->
<div class="border--all" data-tooltip-content="I'm a tooltip!" >Hover for Tooltip</div>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

  • data-tooltip-content works best on a button, input, or link. Other elements may require a role attribute to be set.

Accessibility that tooltips provides for you:

  • wires up aria-describedby to the data-tooltip-content element
  • wires up tab-index to the data-tooltip-content element
  • wires up role of tooltip to the tooltip element

Troubleshooting

How can I manipulate tooltips to make them visible?

Our tooltips are triggered to show through event handlers such as mouseenter, mouseleave, focus and blur. This means that the CSS :hover selector will not allow you to see the tooltip component. The best way to make tooltip visible manually is to inspect the element that you are hovering over and get the generated ID of the element. Open your browser console, copy and paste the following code, insert the generated ID in the querySelector, and set the expanded property to “true" to be able to inspect your tooltip.

const tooltipElement = document.querySelector('#iris_tooltip_generatedIDGoesHere');

Alkami.Iris.TooltipComponent.componentForElement(tooltipElement).expanded = true;

Variables

// Color variables
$tooltip-background-color: $mine-shaft !default;
$tooltip-text-color-default: $white !default;
$tooltip-border-color: $mine-shaft !default;

// Text variables
$tooltip-font-size: 1.4rem !default;

// Width variables
$tooltip-width-small: $container-width-small !default;
$tooltip-width-medium: $container-width-medium !default;
$tooltip-width-large: $container-width-large !default;

Themeability

Nothing is themeable in this component.