Tooltips

Tooltips provide a short description of a page element or control.

Variations

Default

Use to provide a short description of an object without a label.

person-padless
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-tooltip__wrapper">
    <svg class="mds-icon" aria-labelledby="title">
        <title>person-padless</title>
        <use xlink:href="/assets/icons/mds_icons.svg#person-padless"></use>
    </svg>
    <div class="mds-tooltip mds-tooltip--default mds-tooltip--height-s mds-tooltip--width-s mds-tooltip--right-center mds-tooltip--sticky tooltip-doc-site-z-index" role="tooltip">
        <div class="mds-tooltip__text"> Account </div>
    </div>
</div>
  • Triggered by hovering over an object.
  • Use to describe the action of an icon-only button.
  • Use to reveal the full text of truncated data.
  • Use to reveal the purpose of a menu that has a dynamic title.
Lists & Screens menu inside Direct Cloud.

Prompt

Use to temporarily direct attention to an object or functionality.

plus
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-tooltip__wrapper">
    <svg class="mds-icon mds-tooltip__target mds-tooltip__target--block" aria-labelledby="title">
        <title>plus</title>
        <use xlink:href="/assets/icons/mds_icons.svg#plus"></use>
    </svg>
    <div class="mds-tooltip mds-tooltip--prompt mds-tooltip--width-l mds-tooltip--height-m mds-tooltip--sticky mds-tooltip--closable mds-tooltip--right-center tooltip-doc-site-z-index" role="tooltip">
        <div class="mds-tooltip__text"> Your list is empty. Add some investments to get started. </div>
        <div class=" mds-tooltip__close-button">
            <button class="mds-button mds-button--small mds-button--icon-only">
                <svg class="mds-icon mds-button__icon" aria-labelledby="title">
                    <title>remove--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#remove--s"></use>
                </svg>
            </button>
        </div>
    </div>
</div>
  • Dismissable by clicking close icon, remove--s.

Error

Use to direct attention to an error.

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-tooltip__wrapper">
    <button class="mds-button mds-button--primary" type="button" disabled role="button"> Submit </button>
    <div class="mds-tooltip mds-tooltip--error mds-tooltip--width-l mds-tooltip--height-m mds-tooltip--sticky mds-tooltip--right-center tooltip-doc-site-z-index" role="tooltip">
        <div class="mds-tooltip__text"> There is a problem. Please correct all errors before submitting. </div>
    </div>
</div>
  • Dismissable by correcting error.
  • Not commonly used. For inline errors, please see errors in Forms.

Tooltip Positioning

There are 12 possible positions. Choose one that keeps the tooltip’s content in the viewport. For all positioning options see CSS Class References.

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-tooltip__wrapper">
    <button class="mds-button " type="button" role="button"> Right Center </button>
    <div class="mds-tooltip mds-tooltip--default mds-tooltip--width-m mds-tooltip--height-s mds-tooltip--right-center tooltip-doc-site-z-index" role="tooltip">
        <div class="mds-tooltip__text"> Right Center </div>
    </div>
</div>
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-tooltip__wrapper">
    <button class="mds-button " type="button" role="button"> Right Bottom </button>
    <div class="mds-tooltip mds-tooltip--default mds-tooltip--width-m mds-tooltip--right-bottom tooltip-doc-site-z-index" role="tooltip">
        <div class="mds-tooltip__text"> Right Bottom </div>
    </div>
</div>

Guidelines

Use When

  • Providing a short description of a page element or control.

Don’t Use When

  • Providing a description longer than 10 words. Instead, use a Popover.

Visual Language

do center the tooltip’s tail on its associated object, even if the tooltip’s balloon is offset.

Do center the tooltip’s tail on its associated object, even if the tooltip’s balloon is offset.

dont offset the tooltip’s tail or orient and/or move the tooltip locked with the cursor.

Don't offset the tooltip’s tail or orient and/or move the tooltip locked with the cursor.

Editorial

  • Keep it brief, using fewer than 10 words.
  • End full sentences with a period. Using “&” is OK. No “!” If you have an “!” you probably need an error or warning state instead.
  • Don’t spell out numbers: Use 12, not twelve.

Accessibility

  • If the tooltip’s target element is an .mds-text__anchor, or an .mds-button, the tip should show on focus and hide on blur.
  • Use all standard MDS role=”” attributes on .mds-tooltip_target as appropriate.
  • Always use role=”tooltip” on the .mds-tooltip element.

Code Reference

CSS Class References

Class Applies to Outcome

.mds-tooltip

<div>

This class initializes a <div> with the basic styles shared across all tooltips.

.mds-tooltip__text

.mds-tooltip <div>

This class is always applied to a <div> and is the immediate child of .mds-tooltip. It is needed to properly apply the MDS spacing system to the component.

.mds-tooltip__wrapper

Any block, or inline-block element, most likely a <div>

This class should be on the immediate parent of the tooltip’s target element, and it must wrap the target and the tooltip itself. If the tooltip is triggered on hover, this is the element on which that hover is triggered.

.mds-tooltip__target

Any inline, block, or inline-block element

This is used to enable showing/hiding the tooltip on keyboard focus of a focusable tooltip target element. For example, if the tooltip target is an <a> or <button>, focusing the element will show the tip.

.mds-tooltip--default

.mds-tooltip

Sets background color, drop shadow and text styling for a default tooltip.

.mds-tooltip--prompt

.mds-tooltip

Sets background color, drop shadow and text styling for a prompt tooltip.

.mds-tooltip--error

.mds-tooltip

Sets background color, drop shadow and text styling for an error tooltip.

.mds-tooltip--closable

.mds-tooltip--prompt

Gives a tooltip padding space to account for a close button.

.mds-tooltip__close-button

<a>

This is the hook set onto an anchor inside of an .mds-tooltip that will leverage the js that triggers the tip to fade out.

.mds-tooltip__target--help

Any block, inline-block, or inline element

Changes cursor to (?) symbol on hover indicating help information.

.mds-tooltip--top-center

.mds-tooltip

Aligns tooltip to the top center of the invoking element.

.mds-tooltip--top-right

.mds-tooltip

Aligns tooltip to the top right of the invoking element.

.mds-tooltip--top-left

.mds-tooltip

Aligns tooltip to the top left of the invoking element.

.mds-tooltip--bottom-center

.mds-tooltip

Aligns tooltip to the bottom center of the invoking element.

.mds-tooltip--bottom-right

.mds-tooltip

Aligns tooltip to the bottom right of the invoking element.

.mds-tooltip--bottom-left

.mds-tooltip

Aligns tooltip to the bottom left of the invoking element.

.mds-tooltip--right-center

.mds-tooltip

Aligns tooltip to the right center of the invoking element.

.mds-tooltip--right-top

.mds-tooltip

Aligns tooltip to the right top of the invoking element.

.mds-tooltip--right-bottom

.mds-tooltip

Aligns tooltip to the right bottom of the invoking element.

.mds-tooltip--left-center

.mds-tooltip

Aligns tooltip to the left center of the invoking element.

.mds-tooltip--left-top

.mds-tooltip

Aligns tooltip to the left top of the invoking element.

.mds-tooltip--left-bottom

.mds-tooltip

Aligns tooltip to the left bottom of the invoking element.

JavaScript Considerations

Engineers should use their own JavaScript libraries and implementations that most appropriately fit within the requirements for their applications and environments.

©2017 Morningstar, Inc. All rights reserved. Terms of Use