Skip to content
MENU

Soracom

Design System

Texttip

Overview 

ds-texttip is for displaying simple, plain text only tooltips, and uses the content inside the html data-attribute data-ds-texttip for the content. By default there is no requirement to add any classes.

For tooltips that use rich formatted content, see ds-richtip

Options 

Basic usage 

Basic usage - text (hover over example to view)
<div class="ds-text" data-ds-texttip="Text content">Text content</div>
Text content
<div class="ds-text" data-ds-texttip="Text content">Text content</div>
Basic usage - inline text (hover over example to view)
<div class="ds-text">Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you <span data-ds-texttip="Text content">need to manage</span> and secure your IoT network and devices.</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 built for IoT & M2M. Pay as you go with no commitments and all the tools you <span data-ds-texttip="Text content">need to manage</span> and secure your IoT network and devices.</div>
Basic usage - icon (hover over example to view)
<i class="ds-icon --icon-online-solid" data-ds-texttip="Text content"></i>
<i class="ds-icon --icon-online-solid" data-ds-texttip="Text content"></i>
Basic usage - button (hover over example to view)
<button class="ds-button --primary" data-ds-texttip="Text content">
  <span>Button label</span>
</button>
<button class="ds-button --primary" data-ds-texttip="Text content">
  <span>Button label</span>
</button>

Position 

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

Position: bottom-right (hover over example to view)
<i class="ds-icon --icon-online-solid ds-texttip--bottom-right" data-ds-texttip="Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo."></i>
<i class="ds-icon --icon-online-solid ds-texttip--bottom-right" data-ds-texttip="Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo."></i>
The following positions are available - (hover over labels to view examples)
--top-left
ds-texttip--top-left
--top
ds-texttip--top
--top-right
ds-texttip--top-right
--left-top
ds-texttip--left-top
--right-top
ds-texttip--right-top
--left
ds-texttip--left
default (top)
ds-texttip
--right
ds-texttip--right
--left-bottom
ds-texttip--left-bottom
--right-bottom
ds-texttip--right-bottom
--bottom-left
ds-texttip--bottom-left
--bottom
ds-texttip--bottom
--bottom-right
ds-texttip--bottom-right

Visual states 

Visual states (hover over examples to view)
<div class="ds-text ds-texttip--alert" data-ds-texttip="Text content">Alert example</div>
<div class="ds-text ds-texttip--warning" data-ds-texttip="Text content">Warning example</div>
<div class="ds-text ds-texttip--success" data-ds-texttip="Text content">Success example</div>
<div class="ds-text ds-texttip--info" data-ds-texttip="Text content">Info example</div>
Alert example
Warning example
Success example
Info example
<div class="ds-text ds-texttip--alert" data-ds-texttip="Text content">Alert example</div>
<div class="ds-text ds-texttip--warning" data-ds-texttip="Text content">Warning example</div>
<div class="ds-text ds-texttip--success" data-ds-texttip="Text content">Success example</div>
<div class="ds-text ds-texttip--info" data-ds-texttip="Text content">Info example</div>

Component colors 

Text example (hover over example to view)
<div class="ds-text">Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you <span class="ds-texttip--color-magenta" data-ds-texttip="Text content">need to manage</span> and secure your IoT network and devices.</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 built for IoT & M2M. Pay as you go with no commitments and all the tools you <span class="ds-texttip--color-magenta" data-ds-texttip="Text content">need to manage</span> and secure your IoT network and devices.</div>
Button example (hover over example to view)
<button class="ds-button --primary ds-texttip--color-blue-lighter" data-ds-texttip="Text content">
  <span>Button label</span>
</button>
<button class="ds-button --primary ds-texttip--color-blue-lighter" data-ds-texttip="Text content">
  <span>Button label</span>
</button>