UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Tooltip

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

Last update:
()
Message style(scss): more linting
Committer: Tamás Bíró
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code
e-tooltip 

Nulla officia nisi sint 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip">
  Tooltip
</strong>

Nulla nostrud sed cillum <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip">Tooltip</strong>
Amet in irure mollit Tooltip

Directions

Bottom
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-bottom 

Irure qui veniam eiusmod 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom">
  Tooltip
</strong>

Velit qui esse ea <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom">Tooltip</strong>
Cupidatat mollit nostrud reprehenderit Tooltip

Left
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-left 

Ea anim pariatur est sunt proident 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-left">
  Tooltip
</strong>

Dolor ipsum exercitation fugiat in id <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-left">Tooltip</strong>
In cupidatat labore aliquip enim ut Tooltip

Right
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-right 

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

Nisi aliqua proident ullamco <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-right">Tooltip</strong>
Voluptate fugiat mollit ex Tooltip

Top left
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-top-left 

Ipsum ea velit ex 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-top-left">
  Tooltip
</strong>

Consequat proident adipiscing dolore <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-top-left">Tooltip</strong>
In elit fugiat velit Tooltip

Top right
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-top-right 

Consectetur dolore dolore anim 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-top-right">
  Tooltip
</strong>

Nisi deserunt officia cupidatat <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-top-right">Tooltip</strong>
Deserunt duis tempor do Tooltip

Bottom left
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-bottom-left 

Labore officia magna excepteur 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom-left">
  Tooltip
</strong>

Id consectetur fugiat in <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom-left">Tooltip</strong>
Exercitation dolore velit velit Tooltip

Bottom right
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-bottom-right 

Lorem laborum do anim 
<strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom-right">
  Tooltip
</strong>

Dolor ut culpa ipsum <strong data-e-tooltip="This is the tooltip of the text" class="e-tooltip e-tooltip-bottom-right">Tooltip</strong>
Amet amet irure ex Tooltip

Variations

With long text
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-longtext 

Qui minim velit ea 
<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>

Dolore irure aliqua in <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>
Dolore dolore lorem nulla Tooltip

Long text with break words
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-breakword 

Dolore incididunt magna minim 
<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>

Culpa cillum irure commodo <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>
In tempor proident labore Tooltip

HTML
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-html 

Deserunt eu nostrud culpa 
<strong class="e-tooltip e-tooltip-html">
  <strong>
    Tooltip
  </strong>
  <div class="e-tooltip__content">
    You can put 
    <strong>
      anything
    </strong>
     here!
  </div>
</strong>

Esse sed eu ad <strong class="e-tooltip e-tooltip-html"><strong>Tooltip</strong>
                                    <div class="e-tooltip__content">You can put <strong>anything</strong> here!</div></strong>
Nostrud lorem reprehenderit cillum Tooltip
You can put anything here!

Long delay tooltip
Copy Jade
Copy HTML
Show code
Hide code
e-tooltip-html 

Sit amet adipiscing velit 
<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>

Magna consequat commodo eiusmod <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>
Velit nulla dolore magna Tooltip
You can put Link here and it is clickable!

Related components

Tooltip