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>
Additionally, you can add following attributes:

  • data-extra-classes - an additional class for tooltip container .tooltip
  • data-tooltip-container-selector - a css selector for a tooltip container (Bootstrap tooltip data-container attribute)

Example of a tooltip with additional attributes:

1
2
3
<button type="button" class="class" title="your custom tooltip text" data-extra-classes="additional_class" data-tooltip-container-selector="selector">
    click me
</button>

You can also add tooltip helpers to the JavaScript eZ.helpers object:

  • eZ.helpers.tooltips.parse(optional HTMLnode) - creates a tooltip. Equivalent of $(selector).tooltip(). HTMLnode will execute querySelectorAll on this object, a window.document is default value.
  • eZ.helpers.tooltips.hideAll(optional HTMLnode) - closes all tooltips. Equivalent of $(selector).tooltip('hide'). HTMLnode will execute querySelectorAll on this object, a window.document is default value.

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 out their documentation for basic aspects regarding Tooltips configuration.

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

[[code_example {html} code_example]]

Tooltips in Table header

[[code_example {html}
Translation manager
Language name Language code
English (United Kingdom) eng-GB
code_example]]

Tooltips in Table rows

[[code_example {html}
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
code_example]]
Read the Docs