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
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).
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.
This example show how to set an individual ValueState message. The rest of the RichTooltip isn't affected at all.