Tooltips

Overview

Use tooltips to provide more information about the associated content, while allowing the user to remain in their current context.

  • Content should be 360 characters or less and informational only.
  • Basic HTML (lists, text formatting, etc.) is allowed, but tags are currently subject to the 360 character restriction. This will be corrected in a future release.

Do not use for:

  • Legal text
  • Text of unknown length (e.g., text from a third-party API)
  • Decisions, links, buttons, or form elements
  • Notifications or dialogs

Example

Click or tap the links below to see tooltips:

Lorem ipsum dolor sit a basic tooltip, consectetur adipisicing elit. Iure cum dicta veritatis vero, quod nisi numquam asperiores voluptates aspernatur a tooltip with a title! Perspiciatis ratione accusamus at veritatis amet, a tooltip with HTML content.

An icon that triggers a tooltip:

right-aligned

A basic tooltip.
A tooltip with a title applied via the data-title attribute.
  • Tooltips can contain HTML tags
  • But there is still a 360 character limit
  • And tags currently count towards it

Usage

Tooltips have two parts: a trigger element and a content element.

a basic tooltip
<!-- Trigger -->
<span class="layer-trigger" data-layer-id="tooltip-example" tabindex="0">a basic tooltip</span>

<!-- Content -->
<div class="layer-content" id="tooltip-example">A basic tooltip.</div>

The trigger element takes a .layer-trigger class which tells the header to initialize it as a tooltip, and a data-layer-id attribute that tells it where the tooltip content is located.

The content element takes a .layer-content class and an id that matches the data-layer-id attribute on the trigger. This element can be placed anywhere. It will be hidden by the .layer-content class.

Titles

A title can be optionally included by adding a data-title class to the content:

a tooltip with a title
<span class="layer-trigger" data-layer-id="tooltip-example-title" tabindex="0">a tooltip with a title</span>

<div class="layer-content" id="tooltip-example-title" data-title="A tooltip with a title">
  A tooltip with a title applied via the data-title attribute.
</div>

Rich content

Basic HTML (lists, text formatting, etc.) is allowed, but tags are currently subject to the 360 character restriction. This will be corrected in a future release.

a tooltip with HTML content
<span class="layer-trigger" data-layer-id="tooltip-example-html" tabindex="0">a tooltip with HTML content</span>
    
<div class="layer-content" id="tooltip-example-html" data-title="A tooltip with HTML content">
  <ul>
    <li>Tooltips can contain HTML tags</li>
    <li>But there is still a 360 character limit</li>
    <li>And tags currently count towards it</li>
  </ul>
</div>

Multiple triggers

Multiple triggers can reference the same content:

this trigger launches the HTML content example

so does this icon:

<span class="layer-trigger" data-layer-id="tooltip-example-html" tabindex="0">this trigger launches the HTML content example</span>

so does this icon: <span class="layer-trigger shc-icon shc-icon-help font-color-action" data-layer-id="tooltip-example-html" tabindex="0"></span>
<!--
An ugly hack until we can modify the template and move all the documentation out of the Less files.
-->
<style>
.kss-example {
  border: none !important;
  padding: 0 !important;
}

.kss-example .kss-example {
  border: 2px solid #eee !important;
  padding: 1em !important;
}

.kss-markup {
  display: none !important;
}

.kss-example .kss-markup {
  display: block !important;
}
</style>

<section>
  <h2 class="kss-title title-3">Overview</h2>
  <p>Use tooltips to provide more information about the associated content, while
  allowing the user to remain in their current context.</p>

  <ul>
    <li>Content should be 360 characters or less and informational <strong>only</strong>.</li>
    <li>Basic HTML (lists, text formatting, etc.) is allowed, but tags are currently subject to
    the 360 character restriction. This will be corrected in a future release.</li>
  </ul>

  <p><strong>Do not use for:</strong></p>
  <ul>
    <li>Legal text</li>
    <li>Text of unknown length (e.g., text from a third-party API)</li>
    <li>Decisions, links, buttons, or form elements</li>
    <li>Notifications or dialogs</li>
  </ul>
</section>

<section>
  <h2 class="kss-title title-3">Example</h2>
  <p>Click or tap the links below to see tooltips:</p>

  <div class="kss-example">
    <p>
      Lorem ipsum dolor sit <span class="layer-trigger" data-layer-id="tooltip-example" tabindex="0">
      a basic tooltip</span>, consectetur adipisicing elit. Iure cum dicta veritatis vero, quod nisi
      numquam asperiores voluptates aspernatur <span class="layer-trigger" data-layer-id="tooltip-example-title"
      tabindex="0">a tooltip with a title</span>! Perspiciatis ratione accusamus at veritatis amet,
      <span class="layer-trigger" data-layer-id="tooltip-example-html" tabindex="0">a tooltip with HTML content</span>.
    </p>
    <p>
      An icon that triggers a tooltip: <span class="layer-trigger shc-icon shc-icon-help font-color-action"
      data-layer-id="tooltip-example-html" tabindex="0"></span>
    </p>
    <div style="display:flex;justify-content:flex-end;">
      <p>
        <span class="layer-trigger" data-layer-id="tooltip-example-title" tabindex="0">
          right-aligned
        </span>
      </p>
    </div>
  </div>

  <div id="tooltip-example" class="layer-content">
    A basic tooltip.
  </div>

  <div id="tooltip-example-title" class="layer-content" data-title="A tooltip with a title">
    A tooltip with a title applied via the data-title attribute.
  </div>

  <div id="tooltip-example-html" class="layer-content" data-title="A tooltip with HTML content">
    <ul>
      <li>Tooltips can contain HTML tags</li>
      <li>But there is still a 360 character limit</li>
      <li>And tags currently count towards it</li>
    </ul>
  </div>
  <!--
  <pre class="prettyprint lang-html"><code data-language="html">&lt;span class="layer-trigger" data-layer-id="tooltip1" tabindex="0"&gt;a basic tooltip&lt;/span&gt;

&lt;div id="tooltip1" class="layer-content"&gt;
  A basic tooltip.
&lt;/div&gt;

&lt;span class="layer-trigger" data-layer-id="tooltip2"tabindex="0"&gt;a tooltip with a title&lt;/span&gt;

&lt;div id="tooltip2" class="layer-content" data-title="Title text for another element"&gt;
  A tooltip with a title applied via the data-title attribute.
&lt;/div&gt;

&lt;span class="layer-trigger" data-layer-id="tooltip3" tabindex="0"&gt;a tooltip with HTML content&lt;/span&gt;

&lt;div id="tooltip3" class="layer-content"&gt;
  &lt;ul&gt;
    &lt;li&gt;Tooltips can contain HTML tags&lt;/li&gt;
    &lt;li&gt;But there is still a 360 character limit&lt;/li&gt;
    &lt;li&gt;And tags currently count towards it&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

&lt;p&gt;
  An icon that triggers a tooltip: &lt;span class="layer-trigger shc-icon shc-icon-help font-color-action" data-layer-id="tooltip3" tabindex="0"&gt;&lt;/span&gt;
&lt;/p&gt;</code></pre>
-->
</section>

<section>
  <h2 class="kss-title title-3">Usage</h2>
  <p>Tooltips have two parts: a <strong>trigger element</strong> and a <strong>content element</strong>.</p>

  <div class="kss-example">
    <span class="layer-trigger" data-layer-id="tooltip-example" tabindex="0">a basic tooltip</a>
  </div>
  <pre class="prettyprint lang-html"><code data-language="html">&lt;!-- Trigger --&gt;
&lt;span class="layer-trigger" data-layer-id="tooltip-example" tabindex="0"&gt;a basic tooltip&lt;/span&gt;

&lt;!-- Content --&gt;
&lt;div class="layer-content" id="tooltip-example"&gt;A basic tooltip.&lt;/div&gt;</code></pre>

  <p>The trigger element takes a <code>.layer-trigger</code> class which tells the
  header to initialize it as a tooltip, and a <code>data-layer-id</code> attribute
  that tells it where the tooltip content is located.</p>

  <p>The content element takes a <code>.layer-content</code> class and an <code>
  id</code> that matches the <code>data-layer-id</code> attribute on the trigger.
  This element can be placed anywhere. It will be hidden by the <code>
  .layer-content</code> class.</p>

  <h3 class="kss-title title-4">Titles</h4>
  <p>A title can be optionally included by adding a <code>data-title</code> class
  to the content:</p>
  
  <div class="kss-example">
    <span class="layer-trigger" data-layer-id="tooltip-example-title" tabindex="0">a tooltip with a title</span>
  </div>
  <pre class="prettyprint lang-html"><code data-language="html">&lt;span class="layer-trigger" data-layer-id="tooltip-example-title" tabindex="0"&gt;a tooltip with a title&lt;/span&gt;

&lt;div class="layer-content" id="tooltip-example-title" data-title="A tooltip with a title"&gt;
  A tooltip with a title applied via the data-title attribute.
&lt;/div&gt;</code></pre>

  <h3 class="kss-title title-4">Rich content</h4>
  <p>Basic HTML (lists, text formatting, etc.) is allowed, but tags are currently
  subject to the 360 character restriction. This will be corrected in a future
  release.</p>

  <div class="kss-example">
    <span class="layer-trigger" data-layer-id="tooltip-example-html" tabindex="0">a tooltip with HTML content</span>
  </div>
  <pre class="prettyprint lang-html"><code data-language="html">&lt;span class="layer-trigger" data-layer-id="tooltip-example-html" tabindex="0"&gt;a tooltip with HTML content&lt;/span&gt;
    
&lt;div class="layer-content" id="tooltip-example-html" data-title="A tooltip with HTML content"&gt;
  &lt;ul&gt;
    &lt;li&gt;Tooltips can contain HTML tags&lt;/li&gt;
    &lt;li&gt;But there is still a 360 character limit&lt;/li&gt;
    &lt;li&gt;And tags currently count towards it&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>

  <h3 class="kss-title title-4">Multiple triggers</h3>
  <p>
    Multiple triggers can reference the same content:
  </p>
  
  <div class="kss-example">
    <p><span class="layer-trigger" data-layer-id="tooltip-example-html" tabindex="0">this trigger launches the HTML content example</span></p>

    <p>
      so does this icon:
      <span class="layer-trigger shc-icon shc-icon-help font-color-action" data-layer-id="tooltip-example-html" tabindex="0"></span>
    </p>
  </div>
  <pre class="prettyprint lang-html"><code data-language="html">&lt;span class="layer-trigger" data-layer-id="tooltip-example-html" tabindex="0"&gt;this trigger launches the HTML content example&lt;/span&gt;

so does this icon: &lt;span class="layer-trigger shc-icon shc-icon-help font-color-action" data-layer-id="tooltip-example-html" tabindex="0"&gt;&lt;/span&gt;</code></pre>
</section>