Tooltips

Purpose

Use tooltips to pair additional contextual information with an element. Tooltip text is a brief and informative message, such as the name of the object to a short description.

Requirements

The DLS tooltip component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations.

Main Tooltips

Usage

Main tooltips provide information about the element on hover. Tooltips should not house information that is crucial for a customer to complete their task. Keep it short: Try to limit word count to 3-5 words.

Specs - Main Tooltips

Min Width = 130px
Max Width = 200px
Text = Body 1
Class Name = .tooltip

Tooltips Construction

EXAMPLE - MAIN TOOLTIPS

Dark tooltip
(Light interfaces)

Light tooltip
(Dark interfaces)

Trend tooltip
(Various colors)

Copy

<div id="dls-example-tooltips" style="max-width:900px;">
  <div class="row margin-4-t pad-4-t text-align-center">
    <div class="col-md-4 flex flex-justify-center flex-align-items-center flex-column">
      <div data-toggle="tooltip" class="tooltip-container">
        <button
          data-attach-tooltip
          type="button"
          aria-labelledby="darkTooltip"
          class="icon icon-sm dls-bright-blue"
        >
          <i data-dls-icon="info" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        </button>
        <div class="tooltip" data-placement="top" role="tooltip">
          <div class="tooltip-arrow">
            <div class="tooltip-arrow-pointer"></div>
          </div>
          <div id="cf-above-dark-tooltip" class="tooltip-inner">Charles Frost</div>
        </div>
      </div>
      <p class="margin-1-t margin-b" id="darkTooltip">Dark tooltip<br>(Light interfaces)</p>
    </div>
    <div class="col-md-4 flex flex-justify-center flex-align-items-center flex-column">
      <div data-toggle="tooltip" class="tooltip-container">
        <button
          data-attach-tooltip
          type="button"
          class="icon icon-sm dls-bright-blue"
          aria-labelledby="lightTooltip"
        >
          <i data-dls-icon="info" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        </button>
        <div class="tooltip dls-gray-02-bg dls-gray-05" data-placement="top" role="tooltip">
          <div class="tooltip-arrow">
            <div class="tooltip-arrow-pointer"></div>
          </div>
          <div id="cf-above-light-tooltip" class="tooltip-inner">Charles Frost</div>
        </div>
      </div>
      <p class="margin-1-t margin-b" id="lightTooltip">Light tooltip<br>(Dark interfaces)</p>
    </div>
    <div class="col-md-4 flex flex-justify-center flex-align-items-center flex-column">
      <div data-toggle="tooltip" class="tooltip-container">
        <button
          data-attach-tooltip
          type="button"
          class="icon icon-sm dls-bright-blue"
          aria-labelledby="trendTooltip"
        >
          <i data-dls-icon="info" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        </button>
        <div class="tooltip dls-bright-blue-bg" data-placement="top" role="tooltip">
          <div class="tooltip-arrow">
            <div class="tooltip-arrow-pointer"></div>
          </div>
          <div id="cf-above-trend-tooltip" class="tooltip-inner">Charles Frost</div>
        </div>
      </div>
      <p class="margin-1-t margin-b" id="trendTooltip">Trend tooltip<br>(Various colors)</p>
    </div>
  </div>
</div>

Info Tooltips

Usage

Info tooltips are larger and can contain more content than main tooltips. Try to keep the length of the content to a short description with a maximum of three lines. Like main tooltips, these can be positioned above, below, to the left, or to the right of the associated element.

Specs - Info Tooltips

Min Width = 130px
Max Width = 280px
Text = Body 1
Glyph = Info (large), Gray 05 (default), Bright Blue (hover); Cancel Circle (large), Bright Blue (selected)
Class Name = .tooltip-info

Example - Info Tooltips

Select the info tooltip glyph to see its content. To close out of info tooltip select the X glyph or click outside of the info tooltip container.

Balance & Credit Details

Balance Details

Statement Balance

$21,782.66

Recent Payments & Credits

$6,340.00

Remaining Statement Balance

$15,442.66

Recent Charges

05 Aug - Today (Next Statement Date 29 Aug)

$7,460.00

Total Balance

$22,902.66

Copy

<div id="dls-info-tooltips-demo" class="row">
  <div class="col-md-6">
    <div class="card">
      <h2 class="heading-4 dls-bright-blue-bg dls-white text-align-center pad">
        Balance &amp; Credit Details
      </h2>
      <h3 class="heading-3 pad border-b text-align-center">
        Balance Details
      </h3>
      <div class="pad-responsive border-b">
        <div class="row">
          <div class="col-xs-8">
            <span id="statementBalance">Statement Balance</span>
            <div class="tooltip-container" data-toggle="tooltip">
                <button data-attach-tooltip type="button" aria-labelledby="statementBalance" class="btn-tooltip glyph glyph-lg"></button>
              <div class="tooltip tooltip-info" data-placement="right" data-trigger="click"  data-type="info" role="tooltip">
                <div class="tooltip-arrow">
                  <div class="tooltip-arrow-pointer"></div>
                </div>
                <div id="info-2" class="tooltip-inner">
                  <p>An info tooltip should succinctly provide helpful information.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <p class="text-align-right">$21,782.66</p>
          </div>
        </div>
      </div>
      <div class="pad-responsive border-b">
        <div class="row">
          <div class="col-xs-8">
            <span id="recentPayments">Recent Payments &amp; Credits</span>
            <div class="tooltip-container" data-toggle="tooltip">
              <button data-attach-tooltip type="button" aria-labelledby="recentPayments" class="btn-tooltip glyph glyph-lg"></button>
              <div class="tooltip tooltip-info" data-placement="right" data-trigger="click" data-type="info" role="tooltip">
                <div class="tooltip-arrow">
                  <div class="tooltip-arrow-pointer"></div>
                </div>
                <div id="info-3" class="tooltip-inner">
                  <p>An info tooltip should succinctly provide helpful information.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <p class="text-align-right">$6,340.00</p>
          </div>
        </div>
      </div>
      <div class="pad-responsive border-b">
        <div class="row">
          <div class="col-xs-8">
            <span id="remainingStatementBalance">Remaining Statement Balance</span>
            <div class="tooltip-container" data-toggle="tooltip">
              <button data-attach-tooltip type="button" aria-labelledby="remainingStatementBalance" class="btn-tooltip glyph glyph-lg"></button>
              <div class="tooltip tooltip-info" data-placement="right" data-trigger="click" data-type="info" role="tooltip">
                <div class="tooltip-arrow">
                  <div class="tooltip-arrow-pointer"></div>
                </div>
                <div id="info-4" class="tooltip-inner">
                  <p>An info tooltip should succinctly provide helpful information.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <p class="text-align-right">$15,442.66</p>
          </div>
        </div>
      </div>
      <div class="pad-responsive border-b">
        <div class="row">
          <div class="col-xs-8">

            <span id="recentCharges">Recent Charges</span>
            <div data-toggle="tooltip" class="tooltip-container">
              <button data-attach-tooltip type="button" aria-labelledby="recentCharges" class="btn-tooltip glyph glyph-lg"></button>
              <div class="tooltip tooltip-info" data-type="info" data-trigger="click" data-placement="right" role="tooltip">
                <div class="tooltip-arrow">
                  <div class="tooltip-arrow-pointer"></div>
                </div>
                <div id="info-5" class="tooltip-inner">
                  <p>An info tooltip should succinctly provide helpful information.</p>
                </div>
              </div>
            </div>

            <p>05 Aug - Today (Next Statement Date 29 Aug)</p>
          </div>
          <div class="col-xs-1">
            <i data-dls-glyph="plus" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
          </div>
          <div class="col-xs-3">
            <p class="text-align-right">$7,460.00</p>
          </div>
        </div>
      </div>
      <div class="pad-responsive">
        <div class="row">
          <div class="col-xs-8">
            <span id="totalBalance">Total Balance</span>
            <div data-toggle="tooltip" class="tooltip-container">
              <button data-attach-tooltip type="button" aria-labelledby="totalBalance" class="btn-tooltip glyph glyph-lg"></button>
              <div class="tooltip tooltip-info" data-type="info" data-trigger="click" data-placement="right" role="tooltip">
                <div class="tooltip-arrow">
                  <div class="tooltip-arrow-pointer"></div>
                </div>
                <div id="info-6" class="tooltip-inner"><p>An info tooltip should succinctly provide helpful information.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xs-1">
            <i data-dls-glyph="equal" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
          </div>
          <div class="col-xs-3">
            <p class="text-align-right">$22,902.66</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Position

Tooltips can be positioned anywhere alongside an element where space is available.

Example

Position Above

Position Below

Position Left

Position Right

Copy

<div class="row text-align-center">
  <div class="col-md-6">
    <div class="border pad-3-tb">
      <div data-toggle="tooltip" class="tooltip-container">
        <button
          data-attach-tooltip
          type="button"
          class="pad-1 dls-bright-blue"
          aria-labelledby="positionAbove"
        >
          <i data-dls-icon="account" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
        </button>
        <div class="tooltip" data-placement="top" role="tooltip">
          <div class="tooltip-arrow">
            <div class="tooltip-arrow-pointer"></div>
          </div>
          <div id="cf-above" class="tooltip-inner">Charles Frost</div>
        </div>
      </div>
    </div>
    <p class="margin-tb" id="positionAbove">Position Above</p>
  </div>

  <div class="col-md-6">
    <div class="border pad-3-tb">
      <div data-toggle="tooltip" class="tooltip-container">
        <button
          data-attach-tooltip
          type="button"
          class="glyph pad-1-tb"
          aria-labelledby="positionBelow"
        >
          <i data-dls-glyph="info" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
        </button>
        <div class="tooltip tooltip-info" data-placement="bottom" role="tooltip">
          <div class="tooltip-arrow">
            <div class="tooltip-arrow-pointer"></div>
          </div>
          <div id="cf-below" class="tooltip-inner">Charles Frost</div>
        </div>
      </div>
    </div>
    <p class="margin-tb" id="positionBelow">Position Below</p>
  </div>

  <div class="col-md-6">
    <div class="border pad-3-tb">
      <div data-toggle="tooltip" class="tooltip-container">
        <button
          data-attach-tooltip
          type="button"
          class="pad-1 dls-bright-blue"
          aria-labelledby="positionLeft"
        >
          <i data-dls-icon="account" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
        </button>
        <div class="tooltip" data-placement="left" role="tooltip">
          <div class="tooltip-arrow">
            <div class="tooltip-arrow-pointer"></div>
          </div>
          <div id="cf-left" class="tooltip-inner">Charles Frost</div>
        </div>
      </div>
    </div>
    <p class="margin-tb" id="positionLeft">Position Left</p>
  </div>

  <div class="col-md-6">
    <div class="border pad-3-tb">
      <div data-toggle="tooltip" class="tooltip-container">
        <button
          data-attach-tooltip
          type="button"
          class="pad-1 dls-bright-blue"
          aria-labelledby="positionRight"
        >
          <i data-dls-icon="info" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
        </button>
        <div class="tooltip tooltip-info" data-placement="right" role="tooltip">
          <div class="tooltip-arrow">
            <div class="tooltip-arrow-pointer"></div>
          </div>
          <div id="cf-right" class="tooltip-inner">Charles Frost</div>
        </div>
      </div>
    </div>
    <p class="margin-t" id="positionRight">Position Right</p>
  </div>
</div>

Functionality

If you are using dls.js, reference the attributes below for functionality.

Attribute Name	Options	Description
`data-toggle`	`tooltip`	Creates a tooltip object; required for dls.js functionality.
`data-attach-tooltip`	`none`	Indicates which element the tooltip should be placed on.
`data-placement`	`top/bottom/left/right`	Specifies the direction the tooltip shows relative to the element it is placed on.
`data-type`	`info`	Formats the component as an info tooltip.
`data-trigger`	`click/none/blank`	Specifies the action that triggers open/close of tooltip. If "click", tooltip shows/hide on click. If "none", tooltip doesn't show. If left blank, tooltip shows on hover.