Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

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.

Default

Copy Pug
Copy HTML
Show code
Hide code
e-tooltip

Eiusmod ipsum est qui 
<e-tooltip content="This is the tooltip of the text &lt;strong&gt;qweqweqweqwe&lt;/strong&gt;">
  <b>
    tooltip
  </b>
</e-tooltip>

Proident sunt velit voluptate <e-tooltip content="This is the tooltip of the text &lt;strong&gt;qweqweqweqwe&lt;/strong&gt;"><b>tooltip</b></e-tooltip>
In ex sit officia tooltip

Directions

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

Aliquip velit aute ullamco 
<e-tooltip content="tooltip content" placement="top">
  <b>
    tooltip
  </b>
</e-tooltip>

Dolor non excepteur in <e-tooltip content="tooltip content" placement="top"><b>tooltip</b></e-tooltip>
Incididunt consequat dolore ullamco tooltip

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

Do pariatur esse ex 
<e-tooltip content="tooltip content" placement="bottom">
  <b>
    tooltip
  </b>
</e-tooltip>

Nostrud qui dolor sed <e-tooltip content="tooltip content" placement="bottom"><b>tooltip</b></e-tooltip>
Sunt nulla qui incididunt tooltip

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

Veniam laboris fugiat cillum 
<e-tooltip content="tooltip content" placement="left">
  <b>
    tooltip
  </b>
</e-tooltip>

Adipiscing ullamco ut cillum <e-tooltip content="tooltip content" placement="left"><b>tooltip</b></e-tooltip>
Deserunt irure consequat mollit tooltip

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

Tempor dolor velit laborum 
<e-tooltip content="tooltip content" placement="right">
  <b>
    tooltip
  </b>
</e-tooltip>

In ut ex est <e-tooltip content="tooltip content" placement="right"><b>tooltip</b></e-tooltip>
Eiusmod anim reprehenderit sint tooltip

Advanced Directions

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

Duis do lorem aliqua 
<e-tooltip content="tooltip content" placement="top-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Irure nostrud ut sint <e-tooltip content="tooltip content" placement="top-start"><b>tooltip</b></e-tooltip>
In excepteur non officia tooltip

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

Eiusmod fugiat est in 
<e-tooltip content="tooltip content" placement="top-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Fugiat elit aute commodo <e-tooltip content="tooltip content" placement="top-end"><b>tooltip</b></e-tooltip>
Nostrud ut cillum irure tooltip

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

Cupidatat aute mollit velit 
<e-tooltip content="tooltip content" placement="bottom-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Velit irure anim exercitation <e-tooltip content="tooltip content" placement="bottom-start"><b>tooltip</b></e-tooltip>
Anim id consectetur ullamco tooltip

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

Irure do id sunt 
<e-tooltip content="tooltip content" placement="bottom-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Cupidatat mollit pariatur commodo <e-tooltip content="tooltip content" placement="bottom-end"><b>tooltip</b></e-tooltip>
Do laboris irure ipsum tooltip

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

Occaecat in veniam in 
<e-tooltip content="tooltip content" placement="left-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Laborum laborum dolore anim <e-tooltip content="tooltip content" placement="left-start"><b>tooltip</b></e-tooltip>
Velit quis id elit tooltip

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

Nisi laborum ut ipsum 
<e-tooltip content="tooltip content" placement="left-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Anim id incididunt voluptate <e-tooltip content="tooltip content" placement="left-end"><b>tooltip</b></e-tooltip>
Aliqua incididunt voluptate aute tooltip

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

Sit ullamco laborum ea 
<e-tooltip content="tooltip content" placement="right-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Velit velit in in <e-tooltip content="tooltip content" placement="right-start"><b>tooltip</b></e-tooltip>
Nostrud ea in ea tooltip

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

Nisi esse do exercitation 
<e-tooltip content="tooltip content" placement="right-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Minim nostrud quis sint <e-tooltip content="tooltip content" placement="right-end"><b>tooltip</b></e-tooltip>
Veniam veniam sunt in tooltip

Variations

Maximum width
Copy Pug
Copy HTML
Show code
Hide code
width="200"

Elit ut in ipsum 
<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>

Cillum esse consequat magna <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>
Occaecat sunt non sint tooltip

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

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

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

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

Dolor amet consequat eu 
<e-tooltip content="tooltip content" type="helper"></e-tooltip>

Aliqua esse deserunt enim <e-tooltip content="tooltip content" type="helper"></e-tooltip>
Pariatur aute consectetur culpa

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

Ipsum occaecat veniam culpa 
<e-tooltip content="tooltip content" type="helper" has-action></e-tooltip>

Eiusmod lorem quis ipsum <e-tooltip content="tooltip content" type="helper" has-action></e-tooltip>
Duis deserunt fugiat ipsum

Inverse tooltip
Copy Pug
Copy HTML
Show code
Hide code
inverse

Aliqua culpa voluptate in 
<e-tooltip content="tooltip content" type="helper" inverse></e-tooltip>

Irure sit tempor est <e-tooltip content="tooltip content" type="helper" inverse></e-tooltip>
In lorem ea cupidatat

Disabled tooltip
Copy Pug
Copy HTML
Show code
Hide code
disabled

Consequat laborum sint fugiat 
<e-tooltip content="tooltip content" type="helper" disabled></e-tooltip>

Reprehenderit ut ipsum ut <e-tooltip content="tooltip content" type="helper" disabled></e-tooltip>
Sed ea est velit

Permission
Copy Pug
Copy HTML
Show code
Hide code
[permission]

Minim ea id nulla 
<e-tooltip content="Permission denied: &lt;b&gt;Segment / Delete&lt;/b&gt;" permission>
  <e-icon icon="trash-o" type="table"></e-icon>
</e-tooltip>

Veniam ea amet duis <e-tooltip content="Permission denied: &lt;b&gt;Segment / Delete&lt;/b&gt;" permission><e-icon icon="trash-o" type="table"></e-icon></e-tooltip>
Quis duis magna eu

Table row tooltip
Copy Pug
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>
            Cillum nostrud 
          </th>
          <th>
            Laboris aute 
          </th>
        </tr>
      </thead>
      <tbody>
        <tr is="e-tooltip-tr" content="tooltip content" placement="left">
          <td>
            Anim id esse pariatur ea 
          </td>
          <td>
            Non in proident in ullamco 
          </td>
        </tr>
        <tr is="e-tooltip-tr" content="tooltip content" placement="right">
          <td>
            Excepteur dolore nostrud sed mollit 
          </td>
          <td>
            Ex id voluptate tempor consequat 
          </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>Ut minim </th><th>Labore est </th></tr></thead><tbody><tr is="e-tooltip-tr" content="tooltip content" placement="left"><td>Ad culpa minim dolor aliqua </td><td>Do officia in consectetur labore </td></tr><tr is="e-tooltip-tr" content="tooltip content" placement="right"><td>Tempor reprehenderit quis ex ut </td><td>Amet mollit ullamco ipsum reprehenderit </td></tr></tbody></table></div></div>
 
Mollit lorem In labore
Dolor incididunt nulla cillum dolore Lorem lorem fugiat fugiat duis
Excepteur reprehenderit in enim in Enim dolore velit dolor pariatur

API Reference

Properties

NameDescriptionTypeRequiredDefault value
contentThe text of the tooltip, it can be HTML content too.string-
placementPosition of the tooltip relative to the trigger element.stringtop
widthPass an integer value to set a maximum width in pixels.integer-
typeRight now the only type is "helper" which creates a simple box with a question mark.string-
has-actionIf you want to put link in the content, use this attributebooleanfalse
disabledIf you want to temporally disable the tooltip, use this attributebooleanfalse
inverseIf you want to show the tooltip with dark background color, use this attributebooleanfalse
permissionIf you want to show permission information in tooltip, use this attributebooleanfalse
ParameterValue
placementtop | bottom | left | right | top-start | top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end
typehelper
attributehas-action | disabled | inverse

Related components

Old tooltip (deprecated)

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.

Structure

Best practices

Tooltips should:

  • Be provided for every element without labels, telling the name of that element. Users should never have to guess what an element means. This includes icons, images, numbers, charts.
  • Use the "?" icon only if attached to a specific label or element. Free standing "?" are bound to be general and won't help users in their specific task.
  • Should strive to be specific in the context (eg. "Edit email" instead "Edit").
  • Use the user’s terms instead of technical terms. Eg. instead of “Email client screen” use “Email preview”

Try to avoid:

  • Having too many "?" tooltips on page, 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.
  • Tooltips longer than about 2 sentences long (100-150 characters). This length 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.

##Content guidelines

Tooltip length

Shorten tooltips by:

  • Not mentioning the technical name of the UI element, eg. use “Email clients” instead of “Email client list”.
  • Not repeating that is obvious because of the context of the tooltip. Eg. use “Previous” instead of “Previous email client”