Status
Release Available |
Status |
Framework Name |
---|---|---|
4.1 |
Current |
MUI only |
General
A tooltip, infotip, or hint is a text box displaying information about an element, such as a description of a button's function. A tooltip is usually displayed to a user when a user hovers over the element or clicks the information icon (). A portal admin can add the inline tooltip to all the fields where we have text input look and feel.
Note
-
In mobile view (for mobile devices), a user has to tap and hold the information icon () to view the tooltip added through the bubble feature and the required tooltip for the list view.
-
With the Portal 4.5 release, you can also use the
format
property along with the label and tooltip.
In MUI, additional info text related to a field can be shown in two variants.
-
With info icon at the end of the field
-
Info text at the bottom of the field
Syntax
An existing configuration at the field level named tooltip
is used to leverage this functionality. Earlier tooltip was of the type string but now it can be an object of the following format or string type,
Example 21. Code JSON
{ "fieldUi": { "label": "Name", "tooltip": { "content": "Sample tooltip text", "inline": "$global.attr(showInlineToolTips);", "position": "$global.attr(tooltipPosition);", "withArrow": "$global.attr(tooltipWithArrow);" } } }
Where,
-
content: Text to show inside the tooltip.
-
inline: Set this to true if you need an inline tooltip.
-
withArrow: Set this to true if you need an arrow to the tooltip.
-
position: Set this to one of the following valid positions. The default value is the bottom.
For the MUI theme, based on where you want to display the information, the
position
element can have one of the following values:-
left
-
right
-
top
-
bottom
-
bottom-end
-
bottom-start
-
left-end
-
left-start
-
right-end
-
right-start
-
top-end
-
top-start
-
Example
Example 22. Code JSON
{ "fieldUi": { "label": "Name", "tooltip": { "content": "Sample tooltip text", "inline": true, "position": "top" "withArrow": true } } }
The following images show the tooltips on some other fields: