RichTooltip

Introduction

Most SAPUI5 controls allow to set a simple tooltip text. The text is usually rendered as title attribute of one of the DOM elements rendered for the control. It is then up to the user agent when and how the tooltip is displayed. The tooltip design is provided by the RichToolTip control. The RichTooltip can have a text, a title displayed above the tooltip text with a more emphasized font (depending on the theme, for example bold and larger); and it can have an icon next to the text.

For further details see API documentation

Since version 1.11.1 it is possible set an individual ValueState-text to the RichTooltip. Additionally a corresponding image depending on the ValueState is shown next to the ValueState-text.
Additionally using HTML text for the RichTooltip is possible. Instead of a simple text, the text can contain all valid HTML-tags of the FormattedTextView. Please see API-documentation accordingly.

ADVICE: Since the Tooltip itself (which the RichTooltip inherits from) has a default offset, it's recommended to set the offset individually for a RichToolip. Otherwise the RichTooltip would be positioned slightly above the opening element

Basic Example

A RichTooltip is created like any other control by calling its constructor and providing the necessary settings, either as object literal in the constructor, or by calling the set methods. It is attached to a control in the same way a simple tooltip text is, using the setTooltip() method of the control (see API Documentation). setTooltip() can either be called with a simple text string, or via a control inheriting from TooltipBase, for example RichTooltip.

The following sample attaches a RichTooltip to each of the two input fields:

The position and duration for opening and closing the tooltip on the second input field are customized. The corresponding control properties are related to sap.ui.core.Popup (see sap.ui.core.Popup#setPosition and sap.ui.core.Popup#setDurations for further information).

Coexistence With Simple Tooltips ('title')

(Note: In the following text, the terms 'title attribute' and 'tooltip' are used interchangeably)


When the user hovers over some HTML element and if that HTML element does not have an own title attribute, browsers are checking all parent elements for a title. If they find any, they will display them as tooltip, even for the original element without title. The benefit is that this reduces the places where titles have to be set to be shown up as tooltips. If a RichTooltip exists but no title, then the browser will execute the above logic. This might result in two tooltips, the RichTooltip as well as any title set on a parent element. To avoid this, the framework removes all parent title attributes in the case that a RichTooltip is displayed. As soon as the RichTooltip is hidden again, the title attributes are restored. There is an example available that demonstrates this feature. The form has been enhanced with a third text field 'street' that does not have a tooltip. The form is wrapped by a Panel that defines a master tooltip. Whenever you hover over the street field, or over any part of the Panel that does not have its own tooltip, the browser will display the Panel tooltip. When you hover over the first or last name field, only the RichTooltip will be shown.

Example with a ValueState: error and a FormattedTextView as text

This example shows how to create a RichTooltip that reacts on the ValueState of the TextField. Additionally the text of the RichTooltip is not a common text - it's a sample FormattedTextView.

ValueState: warning plus an individual message

This example show how to set an individual ValueState message. The rest of the RichTooltip isn't affected at all.

API Documentation

See API documentation