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

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
SUSE product brand logotype

Smart tooltip

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


linkTruncate 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

linkExample 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.

linkExample 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.

linkImplementation 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
User-name-get-truncated-this-way-when-is-too-long-&Display-onToolTip
content_copy