Tooltip

Default
e-tooltip

Dolor ex reprehenderit do tooltip 
Elit enim irure veniam 
<e-tooltip content="This is the tooltip of the text &lt;strong&gt;qweqweqweqwe&lt;/strong&gt;">
  <b>
    tooltip
  </b>
</e-tooltip>

Eiusmod quis in et 
                        <e-tooltip content="This is the tooltip of the text &lt;strong&gt;qweqweqweqwe&lt;/strong&gt;"><b>tooltip</b></e-tooltip>

Directions

Top (default)
placement="top"

Nisi nostrud anim ut tooltip 
Ipsum velit dolore consectetur 
<e-tooltip content="tooltip content" placement="top">
  <b>
    tooltip
  </b>
</e-tooltip>

Nostrud pariatur veniam ut 
                          <e-tooltip content="tooltip content" placement="top"><b>tooltip</b></e-tooltip>

Bottom
placement="bottom"

Nisi ea dolor reprehenderit tooltip 
In laboris ullamco dolore 
<e-tooltip content="tooltip content" placement="bottom">
  <b>
    tooltip
  </b>
</e-tooltip>

Lorem sint exercitation aute 
                          <e-tooltip content="tooltip content" placement="bottom"><b>tooltip</b></e-tooltip>

Left
placement="left"

Aliqua est ad proident tooltip 
Nostrud ex qui deserunt 
<e-tooltip content="tooltip content" placement="left">
  <b>
    tooltip
  </b>
</e-tooltip>

Dolore sed lorem eu 
                          <e-tooltip content="tooltip content" placement="left"><b>tooltip</b></e-tooltip>

Right
placement="right"

Consectetur do exercitation reprehenderit tooltip 
Occaecat deserunt eu ut 
<e-tooltip content="tooltip content" placement="right">
  <b>
    tooltip
  </b>
</e-tooltip>

Consectetur aute in ad 
                          <e-tooltip content="tooltip content" placement="right"><b>tooltip</b></e-tooltip>

Advanced Directions

Top-Start
placement="top-start"

Irure id ea cupidatat tooltip 
Ut anim ex sunt 
<e-tooltip content="tooltip content" placement="top-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Esse magna enim consectetur 
                          <e-tooltip content="tooltip content" placement="top-start"><b>tooltip</b></e-tooltip>

Top-End
placement="top-end"

Est sed excepteur dolore tooltip 
Consequat consectetur sit nostrud 
<e-tooltip content="tooltip content" placement="top-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Reprehenderit qui excepteur nostrud 
                          <e-tooltip content="tooltip content" placement="top-end"><b>tooltip</b></e-tooltip>

Bottom-Start
placement="bottom-start"

Dolor officia culpa consequat tooltip 
Cillum tempor consectetur pariatur 
<e-tooltip content="tooltip content" placement="bottom-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Tempor sunt labore ut 
                          <e-tooltip content="tooltip content" placement="bottom-start"><b>tooltip</b></e-tooltip>

Bottom-End
placement="bottom-end"

Qui esse nostrud in tooltip 
Laborum amet sit sit 
<e-tooltip content="tooltip content" placement="bottom-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Laborum dolor nostrud cupidatat 
                          <e-tooltip content="tooltip content" placement="bottom-end"><b>tooltip</b></e-tooltip>

Left-Start
placement="left-start"

Veniam irure minim mollit tooltip 
In nostrud aliquip incididunt 
<e-tooltip content="tooltip content" placement="left-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Tempor irure magna proident 
                          <e-tooltip content="tooltip content" placement="left-start"><b>tooltip</b></e-tooltip>

Left-End
placement="left-end"

Et excepteur enim laboris tooltip 
Magna id ullamco reprehenderit 
<e-tooltip content="tooltip content" placement="left-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Nisi in qui anim 
                          <e-tooltip content="tooltip content" placement="left-end"><b>tooltip</b></e-tooltip>

Right-Start
placement="right-start"

Eiusmod velit labore nulla tooltip 
Eu ut aute ea 
<e-tooltip content="tooltip content" placement="right-start">
  <b>
    tooltip
  </b>
</e-tooltip>

Nostrud nisi est fugiat 
                          <e-tooltip content="tooltip content" placement="right-start"><b>tooltip</b></e-tooltip>

Right-End
placement="right-end"

Ea mollit pariatur sit tooltip 
Aute ut occaecat sit 
<e-tooltip content="tooltip content" placement="right-end">
  <b>
    tooltip
  </b>
</e-tooltip>

Laboris ipsum aliqua culpa 
                          <e-tooltip content="tooltip content" placement="right-end"><b>tooltip</b></e-tooltip>

Variations

Fix width
width="200"

Veniam occaecat aliquip cupidatat tooltip 
Qui mollit quis 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>

In sunt dolore dolore 
                          <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>

Helper tooltip
type="helper"

Ullamco reprehenderit adipiscing nisi 
Non in in tempor 
<e-tooltip content="tooltip content" type="helper"></e-tooltip>

Irure commodo exercitation occaecat 
                          <e-tooltip content="tooltip content" type="helper"></e-tooltip>

Hoverable tooltip
has-action

Et sint et incididunt 
Exercitation eiusmod sint est 
<e-tooltip content="tooltip content" type="helper" has-action></e-tooltip>

Ad aliqua excepteur culpa 
                          <e-tooltip content="tooltip content" type="helper" has-action></e-tooltip>

Inverse tooltip
inverse

Do exercitation laborum esse 
Consequat excepteur consequat nisi 
<e-tooltip content="tooltip content" type="helper" inverse></e-tooltip>

Irure dolore ullamco ea 
                          <e-tooltip content="tooltip content" type="helper" inverse></e-tooltip>

Disabled tooltip
disabled

Excepteur ipsum ut eiusmod 
Exercitation in reprehenderit eiusmod 
<e-tooltip content="tooltip content" type="helper" disabled></e-tooltip>

Aliqua nisi irure laborum 
                          <e-tooltip content="tooltip content" type="helper" disabled></e-tooltip>

Table row tooltip
is="e-tooltip-tr"

 
Magna id Irure in
Commodo ipsum id excepteur ex Sunt exercitation laborum sit dolore
Enim ut commodo veniam dolor Eiusmod in tempor laboris qui 
<div class="e-row">
  <div class="e-col-3">
    &nbsp;
  </div>
  <div class="e-col-5">
    <table class="e-table">
      <thead>
        <tr>
          <th>
            Qui nulla 
          </th>
          <th>
            Do ullamco 
          </th>
        </tr>
      </thead>
      <tbody>
        <tr is="e-tooltip-tr" content="tooltip content" placement="left">
          <td>
            Nisi consequat exercitation esse ut 
          </td>
          <td>
            Ipsum in irure elit anim 
          </td>
        </tr>
        <tr is="e-tooltip-tr" content="tooltip content" placement="right">
          <td>
            In tempor qui nulla enim 
          </td>
          <td>
            Aute dolore ut sit velit 
          </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>Aute aliquip 
                                    </th>
                                    <th>Et velit 
                                    </th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr is="e-tooltip-tr" content="tooltip content" placement="left">
                                    <td>Culpa fugiat sed sed ut 
                                    </td>
                                    <td>Culpa eiusmod excepteur cupidatat mollit 
                                    </td>
                                  </tr>
                                  <tr is="e-tooltip-tr" content="tooltip content" placement="right">
                                    <td>Ut in mollit qui nulla 
                                    </td>
                                    <td>Qui consequat aliqua in duis 
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                          </div>

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

When to use a 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.

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”

Last update

Message docs(tooltip): add extra parameter, and attribute
Date:
()
Committer: rudywaltz
Component history