Old tooltip (deprecated)

Default
e-tooltip

Exercitation nisi sit ut Tooltip 
Eu sunt sint proident 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip">
  Tooltip
</strong>

Magna ut et adipiscing <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip">Tooltip</strong>

Directions

Bottom
e-tooltip-bottom

Non deserunt culpa aliquip Tooltip 
Dolor reprehenderit laboris dolore 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom">
  Tooltip
</strong>

Laboris irure sunt ut <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom">Tooltip</strong>

Left
e-tooltip-left

Voluptate officia non ad excepteur in Tooltip 
Pariatur in tempor proident proident sed 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-left">
  Tooltip
</strong>

Aliqua commodo magna aliquip cupidatat in <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-left">Tooltip</strong>

Right
e-tooltip-right

Consectetur ut dolor laborum Tooltip 
Voluptate dolor deserunt dolor 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-right">
  Tooltip
</strong>

Ut in fugiat deserunt <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-right">Tooltip</strong>

Top left
e-tooltip-top-left

Adipiscing cupidatat ut anim Tooltip 
Proident elit ea proident 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-top-left">
  Tooltip
</strong>

Sunt dolore dolor commodo <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-top-left">Tooltip</strong>

Top right
e-tooltip-top-right

Laboris quis incididunt laboris Tooltip 
Exercitation ad est elit 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-top-right">
  Tooltip
</strong>

Labore non ex in <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-top-right">Tooltip</strong>

Bottom left
e-tooltip-bottom-left

Amet anim in tempor Tooltip 
Ea proident laborum amet 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom-left">
  Tooltip
</strong>

Amet fugiat quis cillum <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom-left">Tooltip</strong>

Bottom right
e-tooltip-bottom-right

Irure veniam consectetur reprehenderit Tooltip 
Aute ut non pariatur 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom-right">
  Tooltip
</strong>

Sed mollit est sed <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom-right">Tooltip</strong>

Variations

With long text
e-tooltip-longtext

Deserunt elit enim nisi Tooltip 
Aliqua magna cillum excepteur 
<strong data-e-tooltip="This is the tooltip of the text, so this is really-really long..." class="e-tooltip e-tooltip-longtext">
  Tooltip
</strong>

In fugiat veniam exercitation <strong data-e-tooltip="This is the tooltip of the text, so this is really-really long..." class="e-tooltip e-tooltip-longtext">Tooltip</strong>

Long text with break words
e-tooltip-breakword

Pariatur qui occaecat do Tooltip 
Laboris anim amet aliquip 
<strong data-e-tooltip="This_is_the_tooltip_of_the_text,_so_this_is_really-really_long..." class="e-tooltip e-tooltip-longtext e-tooltip-breakword">
  Tooltip
</strong>

Labore ipsum velit pariatur <strong data-e-tooltip="This_is_the_tooltip_of_the_text,_so_this_is_really-really_long..." class="e-tooltip e-tooltip-longtext e-tooltip-breakword">Tooltip</strong>

HTML
e-tooltip-html

Sint voluptate voluptate pariatur Tooltip
You can put anything here!
 
Dolore in et sit 
<strong class="e-tooltip e-tooltip-html">
  <strong>
    Tooltip
  </strong>
  <div class="e-tooltip__content">
    You can put 
    <strong>
      anything
    </strong>
     here!
  </div>
</strong>

In amet aliquip dolore <strong class="e-tooltip e-tooltip-html"><strong>Tooltip</strong>
                            <div class="e-tooltip__content">You can put <strong>anything</strong> here!</div></strong>

Long delay tooltip
e-tooltip-html

Voluptate occaecat cillum ut Tooltip
You can put Link here and it is clickable!
 
Sint voluptate sint quis 
<strong class="e-tooltip e-tooltip-html e-tooltip-longdelay">
  <strong>
    Tooltip
  </strong>
  <div class="e-tooltip__content">
    You can put 
    <a href="https://ui.static.emarsys.net/" target="_blank">
      Link here
    </a>
     and it is clickable!
  </div>
</strong>

Ut ut eu laborum <strong class="e-tooltip e-tooltip-html e-tooltip-longdelay"><strong>Tooltip</strong>
                            <div class="e-tooltip__content">You can put <a href="https://ui.static.emarsys.net/" target="_blank">Link here</a> and it is clickable!</div></strong>

Related components

Tooltip

Tooltip

This is a HTML only tooltip, so you have to take care of the directions.

Last update

Message style(scss): more linting
Date:
()
Committer: Tamás Bíró
Component history