Skip to content

Tooltips

We use Tooltips to provide more information for the users to identify an element, such as a description of its function, and guide them to take action.

How they work
To add a new tooltip you have to add a title attribute with the custom tooltip text in the HTMLnode that should to have a tooltip.

1
<button type="button" class="class" title="your custom tooltip text">click me</button>

A tooltip is displayed automatically when the user hovers the pointer over an action button, and removed when the user clicks the control or move the mouse. The tooltip can also be triggered by focusing on that specific element with the keyboard (tab key), or tapping on it.

Note

Our application relies on Bootstrap's tooltips. Check our their documentation for basic aspects regarding Tooltips configuration.

If you are interested in customizing or extending this component, check out Extending Back Office.

Behavior & motion
A tooltip is displayed upon hovering over an action button. It shows up over 150ms and fades out over 75ms.

Examples

Tooltips in buttons with icons

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<button type="button" class="btn btn-primary" title="Select content">
    <svg class="ez-icon ez-icon--medium ez-icon--light">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#relations"></use>
    </svg>
    Select content
</button>
<button type="button" class="btn ez-btn btn-secondary"  title="Add author">
    <svg class="ez-icon ez-icon-create">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#create"></use>
    </svg>
</button>
<button type="button" class="btn ez-btn btn-dark" title="Open new tab">
    <svg class="ez-icon ez-icon-open-newtab">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#open-newtab"></use>
    </svg>
</button>

Tooltips in Table header

Translation manager
Language name Language code
English (United Kingdom) eng-GB
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="ez-table-header">
    <div class="ez-table-header__headline">Translation manager</div>
    <div>
        <button type="button" class="btn btn-primary" title="Add translation">
            <svg class="ez-icon ez-icon--medium ez-icon--light ez-icon-create">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#create"></use>
            </svg> 
        </button>
        <button type="button" class="btn btn-danger" disabled="disabled">
            <svg class="ez-icon ez-icon--medium ez-icon--light ez-icon-trash">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#trash"></use>
            </svg> 
        </button>
    </div>
</div>
<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>Language name</th>
            <th>Language code</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ez-checkbox-cell">
                <input type="checkbox">
            </td>
            <td>English (United Kingdom)</td>
            <td>eng-GB</td>
        </tr>
    </tbody>
</table>

Tooltips in Table rows

Archived versions
Version Modified language Contributor Created Last saved
1 English (United Kingdom) Administrator User May 03, 2019 15:05 May 03, 2019 15:05
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="ez-table-header">
    <div class="ez-table-header__headline">Archived versions</div>
    <div>
        <button type="button" class="btn btn-danger" disabled="disabled">
            <svg class="ez-icon ez-icon--medium ez-icon--light ez-icon-trash">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#trash"></use>
            </svg> 
        </button>
    </div>
</div>
<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>Version</th>
            <th>Modified language</th>
            <th>Contributor</th>
            <th>Created</th>
            <th>Last saved</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ez-table__cell ez-table__cell--has-checkbox">
                <input type="checkbox">
            </td>
            <td class="ez-table__cell">1</td>
            <td class="ez-table__cell">English (United Kingdom)</td>
            <td class="ez-table__cell">Administrator User</td>
            <td class="ez-table__cell">May 03, 2019 15:05</td>
            <td class="ez-table__cell">May 03, 2019 15:05</td>
            <td class="ez-table__cell ez-table__cell--has-action-btns text-right">
                <button type="button" class="btn btn-icon mx-2 ez-btn--content-edit" title="Restore archived version">
                    <svg class="ez-icon ez-icon-edit">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#archive-restore"></use>
                    </svg>
                </button>
            </td>
        </tr>
    </tbody>
</table>

Read the Docs