The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Smart tooltip

Display a truncated version of the text and show the full version inside of a tooltip.


Truncate text

Sometimes we need to show a long text (for example a long email address) but there isn't enough space in the element. The smart tooltip truncates the original text and adds a tooltip where the full content is displayed.

For it, we created and implemented a truncation functionality

Example 1: truncate at characters count

In some specific cases we want to truncate at characters length. Adding the `js-tooltip` class and data-truncate-characters=“count” data attribute will truncate it and add a tooltip to display the full text.

Example 2: truncate at a given length

To truncate at a given length (in pixels) you just need to set the `js-tooltip` class and data-truncate-px=“{count}” data attribute to our element.

Implementation examples

Mouse hover the text inside the gray area to trigger the tooltip.

User-name-get-truncated-this-way-when-is-too-long-&Display-onToolTip
content_copy
<span class='js-tooltip' data-truncate-characters='20'>
  User-name-get-truncated-this-way-when-is-too-long-&Display-onToolTip
</span>
User-name-get-truncated-this-way-when-is-too-long-&Display-onToolTip
content_copy
<span class='js-tooltip' data-truncate-px='300'>
  User-name-get-truncated-this-way-when-is-too-long-&Display-onToolTip
</span>