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

Tooltips should be used to provide quickly understandable information to the users in a non-distracting way. Make sure that the tooltips you add are specific and help the user accomplish their goals faster and with more confidence.

Last update:
()
Message fix(stylelint): deprecated rules, fix empty lines
Committer: gydavid
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code
e-tooltip 

In tempor exercitation ut 
<e-tooltip content="This is the tooltip of the text &lt;strong&gt;qweqweqweqwe&lt;/strong&gt;">
  <b>
    tooltip
  </b>
</e-tooltip>

Ut in occaecat excepteur 
                                <e-tooltip content="This is the tooltip of the text &lt;strong&gt;qweqweqweqwe&lt;/strong&gt;"><b>tooltip</b></e-tooltip>
Ea cillum deserunt ex tooltip

Directions

Top (default)
Copy Jade
Copy HTML
Show code
Hide code
placement="top" 

Velit laborum tempor ut 
<e-tooltip content="tooltip content" placement="top">
  <b>
    tooltip
  </b>
</e-tooltip>

Officia cupidatat sunt ut 
                                  <e-tooltip content="tooltip content" placement="top"><b>tooltip</b></e-tooltip>
Aliquip eiusmod duis veniam tooltip

Bottom
Copy Jade
Copy HTML
Show code
Hide code
placement="bottom" 

Ea cillum dolore officia 
<e-tooltip content="tooltip content" placement="bottom">
  <b>
    tooltip
  </b>
</e-tooltip>

Qui proident elit non 
                                  <e-tooltip content="tooltip content" placement="bottom"><b>tooltip</b></e-tooltip>
Ut consequat dolore excepteur tooltip

Left
Copy Jade
Copy HTML
Show code
Hide code
placement="left" 

Minim fugiat duis qui 
<e-tooltip content="tooltip content" placement="left">
  <b>
    tooltip
  </b>
</e-tooltip>

Id in voluptate in 
                                  <e-tooltip content="tooltip content" placement="left"><b>tooltip</b></e-tooltip>
Magna commodo ut et tooltip

Right
Copy Jade
Copy HTML
Show code
Hide code
placement="right" 

Adipiscing ea esse dolor 
<e-tooltip content="tooltip content" placement="right">
  <b>
    tooltip
  </b>
</e-tooltip>

Excepteur duis voluptate ad 
                                  <e-tooltip content="tooltip content" placement="right"><b>tooltip</b></e-tooltip>
Ullamco consectetur commodo irure tooltip

Advanced Directions

Top-Start
Copy Jade
Copy HTML
Show code
Hide code
placement="top-start" 

Consectetur ut dolore deserunt 
<e-tooltip content="tooltip content" placement="top-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Deserunt occaecat amet tempor 
                                  <e-tooltip content="tooltip content" placement="top-start"><b>tooltip</b></e-tooltip>
Cupidatat aute velit elit tooltip

Top-End
Copy Jade
Copy HTML
Show code
Hide code
placement="top-end" 

Nostrud lorem dolor labore 
<e-tooltip content="tooltip content" placement="top-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Sed sed quis magna 
                                  <e-tooltip content="tooltip content" placement="top-end"><b>tooltip</b></e-tooltip>
Ex minim sint mollit tooltip

Bottom-Start
Copy Jade
Copy HTML
Show code
Hide code
placement="bottom-start" 

Sunt nisi duis velit 
<e-tooltip content="tooltip content" placement="bottom-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Et magna ut cupidatat 
                                  <e-tooltip content="tooltip content" placement="bottom-start"><b>tooltip</b></e-tooltip>
Fugiat in ullamco ad tooltip

Bottom-End
Copy Jade
Copy HTML
Show code
Hide code
placement="bottom-end" 

Sint ullamco veniam magna 
<e-tooltip content="tooltip content" placement="bottom-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Eiusmod est ad fugiat 
                                  <e-tooltip content="tooltip content" placement="bottom-end"><b>tooltip</b></e-tooltip>
Enim sunt dolor officia tooltip

Left-Start
Copy Jade
Copy HTML
Show code
Hide code
placement="left-start" 

Enim aliquip dolor ad 
<e-tooltip content="tooltip content" placement="left-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Aliqua qui officia eiusmod 
                                  <e-tooltip content="tooltip content" placement="left-start"><b>tooltip</b></e-tooltip>
Et incididunt sed excepteur tooltip

Left-End
Copy Jade
Copy HTML
Show code
Hide code
placement="left-end" 

Occaecat culpa nisi exercitation 
<e-tooltip content="tooltip content" placement="left-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Adipiscing nisi velit officia 
                                  <e-tooltip content="tooltip content" placement="left-end"><b>tooltip</b></e-tooltip>
Deserunt est sint cillum tooltip

Right-Start
Copy Jade
Copy HTML
Show code
Hide code
placement="right-start" 

Pariatur consequat amet labore 
<e-tooltip content="tooltip content" placement="right-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Velit ipsum cillum elit 
                                  <e-tooltip content="tooltip content" placement="right-start"><b>tooltip</b></e-tooltip>
Deserunt ut veniam excepteur tooltip

Right-End
Copy Jade
Copy HTML
Show code
Hide code
placement="right-end" 

Velit occaecat veniam incididunt 
<e-tooltip content="tooltip content" placement="right-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Ex dolor sunt aute 
                                  <e-tooltip content="tooltip content" placement="right-end"><b>tooltip</b></e-tooltip>
Excepteur ut sit sunt tooltip

Variations

Fix width
Copy Jade
Copy HTML
Show code
Hide code
width="200" 

Id culpa culpa cupidatat 
<e-tooltip content="long tooltip content with &lt;strong&gt;html&lt;/strong&gt;, long tooltip content with &lt;strong&gt;html&lt;/strong&gt;" width="200">
  <b>
    tooltip
  </b>
</e-tooltip>

Deserunt proident exercitation mollit 
                                  <e-tooltip content="long tooltip content with &lt;strong&gt;html&lt;/strong&gt;, long tooltip content with &lt;strong&gt;html&lt;/strong&gt;" width="200"><b>tooltip</b></e-tooltip>
Dolor dolor ea in tooltip

Block instead of inline
Copy Jade
Copy HTML
Show code
Hide code
[block] 

<e-tooltip content="tooltip content" block>
  <input placeholder="Placeholder" class="e-input">
</e-tooltip>


                                  <e-tooltip content="tooltip content" block>
                                    <input placeholder="Placeholder" class="e-input">
                                  </e-tooltip>

Helper tooltip
Copy Jade
Copy HTML
Show code
Hide code
type="helper" 

Eu sunt ut voluptate 
<e-tooltip content="tooltip content" type="helper"></e-tooltip>

Et in reprehenderit in 
                                  <e-tooltip content="tooltip content" type="helper"></e-tooltip>
Consectetur in eu id

Hoverable tooltip
Copy Jade
Copy HTML
Show code
Hide code
has-action 

In culpa esse eiusmod 
<e-tooltip content="tooltip content" type="helper" has-action></e-tooltip>

Reprehenderit dolor nulla sunt 
                                  <e-tooltip content="tooltip content" type="helper" has-action></e-tooltip>
Aute laboris ea veniam

Inverse tooltip
Copy Jade
Copy HTML
Show code
Hide code
inverse 

Ad id ut ullamco 
<e-tooltip content="tooltip content" type="helper" inverse></e-tooltip>

Magna et consequat sit 
                                  <e-tooltip content="tooltip content" type="helper" inverse></e-tooltip>
Cupidatat magna ad exercitation

Disabled tooltip
Copy Jade
Copy HTML
Show code
Hide code
disabled 

Veniam velit aute nostrud 
<e-tooltip content="tooltip content" type="helper" disabled></e-tooltip>

Culpa laborum dolore velit 
                                  <e-tooltip content="tooltip content" type="helper" disabled></e-tooltip>
Ullamco ipsum cupidatat in

Table row tooltip
Copy Jade
Copy HTML
Show code
Hide code
is="e-tooltip-tr" 

<div class="e-row">
  <div class="e-col-3">
    &nbsp;
  </div>
  <div class="e-col-5">
    <table class="e-table">
      <thead>
        <tr>
          <th>
            Veniam aliquip 
          </th>
          <th>
            Commodo reprehenderit 
          </th>
        </tr>
      </thead>
      <tbody>
        <tr is="e-tooltip-tr" content="tooltip content" placement="left">
          <td>
            Magna fugiat ut magna aute 
          </td>
          <td>
            Adipiscing id exercitation nisi aliqua 
          </td>
        </tr>
        <tr is="e-tooltip-tr" content="tooltip content" placement="right">
          <td>
            Occaecat adipiscing cillum veniam anim 
          </td>
          <td>
            Ut aute proident aliquip mollit 
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


                                  <div class="e-row">
                                    <div class="e-col-3">&nbsp;</div>
                                    <div class="e-col-5">
                                      <table class="e-table">
                                        <thead>
                                          <tr>
                                            <th>Proident do 
                                            </th>
                                            <th>Labore officia 
                                            </th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr is="e-tooltip-tr" content="tooltip content" placement="left">
                                            <td>Labore ad non tempor est 
                                            </td>
                                            <td>Sed consectetur est aliquip aute 
                                            </td>
                                          </tr>
                                          <tr is="e-tooltip-tr" content="tooltip content" placement="right">
                                            <td>Et duis labore mollit velit 
                                            </td>
                                            <td>Sed eiusmod id amet ut 
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
 
Anim eu Duis exercitation
Excepteur tempor sunt excepteur ut Elit magna ut tempor minim
Proident dolor officia ea dolore Dolor esse dolor ullamco sit

API Reference

Properties

Name Description Type Required Default value
content The text of the tooltip, it can be HTML content too. string -
placement Position of the tooltip relative to the trigger element. string top
width Set this to an integer value (px) to get fix width. integer -
type Right now the only type is "helper" which creates a simple box with a question mark. string -
has-action If you want put link in the content, use this attribute boolean false
disabled If you want temporally disable the tooltip, use this attribute boolean false
inverse If you want show the tooltip with dark background color, use this attribute boolean false
Parameter Value
placement top | bottom | left | right | top-start | top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end
type helper
attribute has-action | disabled | inverse

Related components

Old tooltip (deprecated)

Tooltip guidelines

  1. Every element without labels should have a tooltip telling the name of that element. Users should never have to guess what an element means. This includes icons, images, numbers, charts.
  2. There should be only a minimum number of "?" tooltips on the UI, and there should be a strong reason for every added one. Instructions and general feature information should go the documentation. Instead of adding a tooltip improve the microcopy or the design.
  3. "?" tooltips should be always attached to a specific label or element. Free standing "?" are bound to be general and won't help users in their specific task.
  4. When creating tooltips, limit the length to about 2 sentences (100-150 characters). This makes it easier for the users to quickly understand what is important, and doesn't force them to interrupt their task by reading long chunks of text. Long tooltips may also cover important UI elements. Add further information to the documentation and provide a link.
    1. Make the length shorter by not mentioning the technical name of the UI element, eg. use “Email clients” instead of “Email client list”.
    2. Make it shorter by not repeating that is obvious because of the context of the tooltip. Eg. use “Previous” instead of “Previous email client”
    3. But also make it not general (eg. "Edit email" instead "Edit").
    4. Use the user’s terms instead of technical terms. Eg. instead of “Email client screen” use “Email preview”