Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Richtip

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.