Skip to content

Soracom

Design System
Home Design System Elements 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)
<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.
<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>
Basic usage - inline text (hover over example to view)
  <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.
  <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>
Basic usage - icon (hover over example to view)
<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.
<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>
Basic usage - button (hover over example to view)
<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.
<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>

Rich content 

Example using html content (hover over example to view)
<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
<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>

Position 

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

Position: Bottom-right (hover over example to view)
<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.
<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>
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)
<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.
<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>

Component colors 

Icon example (hover over example to view)
<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.
<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>
Icon example (hover over example to view)
<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.
<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>

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)
<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.
<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>

Examples 

Richtip used inside datatable head
<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
<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>
<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.
<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>