Richtip

Overview

ds-richtip is for displaying more complex, rich content tooltips, and uses the content inside the ds-richtip__content element.

For simple tooltips that use plain text, see ds-texttip

Options

Basic usage

Basic usage - text (hover over example to view)

html

Copy

<div class="ds-richtip">
  <div class="ds-richtip__button ds-text">Text Content</div>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>

Text Content

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Basic usage - inline text (hover over example to view)

html

Copy

<div class="ds-text">
  Global multicarrier cellular connectivity
  <div class="ds-richtip">
    <div class="ds-richtip__button ds-text">built for IoT & M2M</div>
    <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
  </div>
  . Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.
</div>

Global multicarrier cellular connectivity

built for IoT & M2M

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Basic usage - icon (hover over example to view)

html

Copy

<div class="ds-richtip">
  <i class="ds-icon --icon-info ds-richtip__button"></i>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Basic usage - button (hover over example to view)

html

Copy

<div class="ds-richtip">
  <button class="ds-button ds-richtip__button">
    <span>Button label</span>
  </button>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Rich content

Example using html content (hover over example to view)

html

Copy

<div class="ds-richtip">
  <i class="ds-icon --icon-info ds-richtip__button"></i>
  <div class="ds-richtip__content ds-rows">
    <p class="ds-text --label">Title</p>
    <p class="ds-text --small">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</p>
    <div class="ds-details">
      <dl>
        <dt>Label</dt>
        <dd>
          <div>Value</div>
        </dd>
      </dl>
      <dl>
        <dt>Label</dt>
        <dd>
          <div>Value</div>
        </dd>
      </dl>
    </div>
  </div>
</div>

Title

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Label: Value

Label: Value

Position

By adding the appropriate ds-richtip --* class, the position of the richtip can be changed.

Position: Bottom-right (hover over example to view)

html

Copy

<div class="ds-richtip --bottom-right">
  <i class="ds-icon --icon-info ds-richtip__button"></i>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

The following positions are available - (hover over labels to view examples)

	--top-left ds-richtip --top-left Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.	--top ds-richtip --top Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.	--top-right ds-richtip --top-right Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.
--left-top ds-richtip --left-top Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.				--right-top ds-richtip --right-top Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.
--left ds-richtip --left Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.		default (top) ds-richtip Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.		--right ds-richtip --right Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.
--left-bottom ds-richtip --left-bottom Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.				--right-bottom ds-richtip --right-bottom Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.
	--bottom-left ds-richtip --bottom-left Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.	--bottom ds-richtip --bottom Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.	--bottom-right ds-richtip --bottom-right Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Visual states

Visual states (hover over examples to view)

html

Copy

<div class="ds-richtip --alert">
  <div class="ds-richtip__button ds-text">Alert example</div>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>
<div class="ds-richtip --warning">
  <div class="ds-richtip__button ds-text">Warning example</div>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>
<div class="ds-richtip --success">
  <div class="ds-richtip__button ds-text">Success example</div>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>
<div class="ds-richtip --info">
  <div class="ds-richtip__button ds-text">Info example</div>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>

Alert example

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Warning example

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Success example

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Info example

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Component colors

Icon example (hover over example to view)

html

Copy

<div class="ds-richtip --color-magenta">
  <i class="ds-icon --icon-info ds-richtip__button"></i>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Icon example (hover over example to view)

html

Copy

<div class="ds-richtip --color-magenta-lighter">
  <i class="ds-icon --icon-info ds-richtip__button"></i>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</div>

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Pinnable tips

By default the richtip content is shown when hovering over the ds-richtip__button. Using the following html structure instead will require a click to to show and hide the richtip content.

Pinnable richtip (click example to view)

html

Copy

<details class="ds-richtip">
  <summary><i class="ds-icon --icon-info"></i></summary>
  <div class="ds-richtip__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
</details>

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

Javascript

The following example code improves functionality by adding a delay when moving from the trigger element to the __content element, making it easier interact with the popup tip:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.ds-richtip').forEach((el) => {
    let t;
    el.addEventListener('mouseenter', () => {
      clearTimeout(t);
      el.classList.add('--active');
    });
    el.addEventListener('mouseleave', () => {
      t = setTimeout(() => el.classList.remove('--active'), 250);
    });
  });
});

Examples

Richtip used inside datatable head

html

Copy

<table class="ds-datatable --striped">
  <thead>
    <tr>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>
        Heading three
        <div class="ds-richtip --bottom">
          <i class="ds-richtip__button ds-icon --xxsmall --icon-info"></i>
          <div class="ds-richtip__content ds-rows">
            <p class="ds-text --label">Title</p>
            <p class="ds-text --small">Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</p>
            <div class="ds-details">
              <dl>
                <dt>Label</dt>
                <dd>
                  <div>Value</div>
                </dd>
              </dl>
              <dl>
                <dt>Label</dt>
                <dd>
                  <div>Value</div>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Heading one	Heading two	Heading three Title Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices. Label Value Label Value
Content	Content	Content
Content	Content	Content
Content	Content	Content

html

Copy

<div class="ds-text --label">
  Example text
  <div class="ds-richtip --right">
    <i class="__button ds-icon --xxsmall --icon-info"></i>
    <div class="__content">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href="#">tools you need</a> to manage and secure your IoT network and devices.</div>
  </div>
</div>

Example text

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.