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
<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>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">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
. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.
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>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>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
<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.
<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.
|
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.
|
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.
|
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.
|
||
|
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.
|
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.
|
|||
|
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.
|
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.
|
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.
|
||
|
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.
|
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.
|
|||
|
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.
|
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.
|
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
<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>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.
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.
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.
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
<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-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.
<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.
Examples
<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.
|
|---|---|---|
| Content | Content | Content |
| Content | Content | Content |
| Content | Content | Content |
<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.