EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Components    3.14.Tooltips


Tooltips are elements that are applied to help the user by displaying informative text when on mouseover, focus on, or tap an element.

3.0.Components      3.14.Tooltips      3.14.1.Usage


When triggered, tooltips display a text label identifying an element, such as a description of its function. It should be:


Tooltips appear on hover, focus, or touch, and disappear after a short duration (around 1.5 seconds).


Tooltips are always paired nearby the element with which they are associated.


Tooltips only include short, descriptive text.


On desktop, tooltips appear in the center of click targets and stay in place while cursor moves within the target.

On mobile, the tooltip is triggered by tapping/holding a screen element or component. Continuously display the tooltip as long as the user long-presses or hovers over the element.


Keep in mind that if a button or other object requires users to keep checking the tooltip to understand it, maybe you need to reconsider your design as you are not transmitting the message in the easiest way.

Some Image
    Some Image

    Examples of tooltips used at Daimer

      3.0.Components      3.14.Tooltips      3.14.2.Download Resources

      3.14.2.Download Resources

      Designs of the Tooltip components are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.

      See the Sketch Design Kit