Product Name

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.

Default 
<div class="mds-tooltip__wrapper">
    <button class="mds-button mds-button--icon-only" type="button" aria-describedby="tooltip1" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--right">
            <use xlink:href="/assets/icons/mds_icons.svg#person-padless">
                <title>User Account</title>
            </use>
        </svg>
    </button>
    <div id="tooltip1" class="mds-tooltip mds-tooltip--default mds-tooltip--width-s mds-tooltip--right-center mds-tooltip--sticky tooltip-doc-site-z-index" role="tooltip" aria-hidden="false" aria-labelledby="tooltiptext1">
        <div class="mds-tooltip__text" id="tooltiptext1"> 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.

Prompt 
<div class="mds-tooltip__wrapper">
    <button class="mds-button mds-button--icon-only mds-tooltip__target mds-tooltip__target--block" type="button" aria-describedby="tooltip2" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--right">
            <use xlink:href="/assets/icons/mds_icons.svg#plus">
                <title>Add list</title>
            </use>
        </svg>
    </button>
    <div id="tooltip2" class="mds-tooltip mds-tooltip--prompt mds-tooltip--width-l mds-tooltip--sticky mds-tooltip--closable mds-tooltip--right-center tooltip-doc-site-z-index" role="tooltip" aria-hidden="false" aria-labelledby="tooltiptext2">
        <div class="mds-tooltip__text" id="tooltiptext2"> 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">
                    <use xlink:href="/assets/icons/mds_icons.svg#remove--s">
                        <title>Close</title>
                    </use>
                </svg>
            </button>
        </div>
    </div>
</div>
  • Dismissable by clicking close icon, remove--s.

Error

Use to direct attention to an error.

Error 
<div class="mds-tooltip__wrapper">
    <button class="mds-button mds-button--primary" type="button" disabled aria-describedby="tooltip3" role="button"> Submit </button>
    <div id="tooltip3" class="mds-tooltip mds-tooltip--error mds-tooltip--width-l mds-tooltip--sticky mds-tooltip--right-center tooltip-doc-site-z-index" role="tooltip" aria-hidden="false" aria-labelledby="tooltiptext3">
        <div class="mds-tooltip__text" id="tooltiptext3"> 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.

Center Positioning 
<div class="mds-tooltip__wrapper">
    <button class="mds-button " type="button" aria-describedby="tooltip4" role="button"> Right Center </button>
    <div id="tooltip4" class="mds-tooltip mds-tooltip--default mds-tooltip--width-m mds-tooltip--right-center tooltip-doc-site-z-index" role="tooltip" aria-hidden="true" aria-labelledby="tooltiptext4">
        <div class="mds-tooltip__text" id="tooltiptext4"> Right Center </div>
    </div>
</div>
Offset Positioning 
<div class="mds-tooltip__wrapper">
    <button class="mds-button " type="button" aria-describedby="tooltip5" role="button"> Right Bottom </button>
    <div id="tooltip5" class="mds-tooltip mds-tooltip--default mds-tooltip--width-m mds-tooltip--right-bottom tooltip-doc-site-z-index" role="tooltip" aria-hidden="true" aria-labelledby="tooltiptext4">
        <div class="mds-tooltip__text" id="tooltiptext4"> 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.
Don‘t 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.
  • Use aria-hidden="true" to prevent screenreader from reading hidden tooltips. Change value to false when Tooltip is visible.
  • Tooltip trigger element should have a aria-describedby attribute which references to the ID of the associated Tooltip.
  • Add aria-labelledby to Tooltip to associate full content of a Tooltip.

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