- 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>
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>
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>
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>
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
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>
The following positions are available - (hover over labels to view examples)
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
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>
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>
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>
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>
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
<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>