Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

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
Open in playground
Show code
Hide code
e-tooltip

Est dolore nostrud laboris 
<e-tooltip content="This is the tooltip of the text &lt;strong&gt;qweqweqweqwe&lt;/strong&gt;">
  <b>
    tooltip
  </b>
</e-tooltip>
Labore amet eu ut 
<e-tooltip content="This is the tooltip of the text &lt;strong&gt;qweqweqweqwe&lt;/strong&gt;">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Dolore eiusmod eiusmod consectetur tooltip

Directions

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

Velit deserunt deserunt sit 
<e-tooltip content="tooltip content" placement="top">
  <b>
    tooltip
  </b>
</e-tooltip>
In id consectetur excepteur 
<e-tooltip content="tooltip content" placement="top">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Ullamco ad consectetur eu tooltip

Bottom
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
placement="bottom"

Consectetur excepteur cupidatat ullamco 
<e-tooltip content="tooltip content" placement="bottom">
  <b>
    tooltip
  </b>
</e-tooltip>
Est veniam sint veniam 
<e-tooltip content="tooltip content" placement="bottom">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Mollit velit laborum dolor tooltip

Left
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
placement="left"

Do laborum sed aute 
<e-tooltip content="tooltip content" placement="left">
  <b>
    tooltip
  </b>
</e-tooltip>
Excepteur fugiat nisi aliquip 
<e-tooltip content="tooltip content" placement="left">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Consequat duis esse incididunt tooltip

Right
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
placement="right"

Consectetur occaecat qui dolor 
<e-tooltip content="tooltip content" placement="right">
  <b>
    tooltip
  </b>
</e-tooltip>
Est in amet fugiat 
<e-tooltip content="tooltip content" placement="right">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Ex occaecat ipsum nulla tooltip

Advanced Directions

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

Fugiat in qui ut 
<e-tooltip content="tooltip content" placement="top-start">
  <b>
    tooltip
  </b>
</e-tooltip>
Fugiat irure lorem dolor 
<e-tooltip content="tooltip content" placement="top-start">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Do elit lorem lorem tooltip

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

Aliquip ut dolore do 
<e-tooltip content="tooltip content" placement="top-end">
  <b>
    tooltip
  </b>
</e-tooltip>
Aliquip consectetur sint labore 
<e-tooltip content="tooltip content" placement="top-end">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Nostrud deserunt proident ut tooltip

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

Excepteur mollit ut dolor 
<e-tooltip content="tooltip content" placement="bottom-start">
  <b>
    tooltip
  </b>
</e-tooltip>
Aliquip amet cillum commodo 
<e-tooltip content="tooltip content" placement="bottom-start">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Deserunt aliquip cupidatat ut tooltip

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

Ut aute minim sint 
<e-tooltip content="tooltip content" placement="bottom-end">
  <b>
    tooltip
  </b>
</e-tooltip>
Nisi pariatur do tempor 
<e-tooltip content="tooltip content" placement="bottom-end">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Ad deserunt officia dolor tooltip

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

Sunt ut culpa eu 
<e-tooltip content="tooltip content" placement="left-start">
  <b>
    tooltip
  </b>
</e-tooltip>
Ullamco consequat sunt aliquip 
<e-tooltip content="tooltip content" placement="left-start">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Cupidatat aliqua officia nisi tooltip

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

Velit cillum irure quis 
<e-tooltip content="tooltip content" placement="left-end">
  <b>
    tooltip
  </b>
</e-tooltip>
Tempor dolore ipsum nulla 
<e-tooltip content="tooltip content" placement="left-end">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Duis tempor magna occaecat tooltip

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

Cupidatat ex incididunt irure 
<e-tooltip content="tooltip content" placement="right-start">
  <b>
    tooltip
  </b>
</e-tooltip>
In consequat irure tempor 
<e-tooltip content="tooltip content" placement="right-start">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
In ea amet aliqua tooltip

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

Dolor veniam laboris consequat 
<e-tooltip content="tooltip content" placement="right-end">
  <b>
    tooltip
  </b>
</e-tooltip>
Dolor aliqua dolore incididunt 
<e-tooltip content="tooltip content" placement="right-end">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Elit do cupidatat aute tooltip

Variations

Block instead of inline
Copy Pug
Copy HTML
Open in playground
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>
JavaScript
Copy JavaScript

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

Proident in veniam mollit 
<e-tooltip content="tooltip content" type="helper"></e-tooltip>
Dolor minim do pariatur 
<e-tooltip content="tooltip content" type="helper"></e-tooltip>
JavaScript
Copy JavaScript
Mollit magna est consectetur

Vertical align
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
valign="baseline"

Elit deserunt sint sunt 
<e-tooltip content="tooltip content" valign="baseline">
  <b>
    tooltip
  </b>
</e-tooltip>
Ex id aute velit 
<e-tooltip content="tooltip content" valign="baseline">
  <b>
    tooltip
  </b>
</e-tooltip>
JavaScript
Copy JavaScript
Ullamco incididunt nisi labore tooltip

Hoverable tooltip
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
has-action

Ut dolore lorem deserunt 
<e-tooltip content="tooltip content" type="helper" has-action></e-tooltip>
Anim sed in duis 
<e-tooltip content="tooltip content" type="helper" has-action></e-tooltip>
JavaScript
Copy JavaScript
Ut tempor duis culpa

Inverse tooltip
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
inverse

Voluptate in aliquip aute 
<e-tooltip content="tooltip content" type="helper" inverse></e-tooltip>
Elit ea quis minim 
<e-tooltip content="tooltip content" type="helper" inverse></e-tooltip>
JavaScript
Copy JavaScript
Commodo dolore ea ipsum

Disabled tooltip
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
disabled

Cillum labore ut do 
<e-tooltip content="tooltip content" type="helper" disabled></e-tooltip>
Enim enim ut in 
<e-tooltip content="tooltip content" type="helper" disabled></e-tooltip>
JavaScript
Copy JavaScript
Minim nisi minim anim

Permission
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[permission]

Dolore ut dolore occaecat 
<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>
Aliqua laborum excepteur do 
<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>
JavaScript
Copy JavaScript
Deserunt enim et nostrud

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 | block | valign="baseline"

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.

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 (e.g. "Edit email" instead "Edit").
  • Use the user’s terms instead of technical terms, e.g. 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

Shorten tooltips by:

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