Tooltip or Information Bubble

  • Updated

Tooltip or Information Bubble

Status

Release Available

Status

Framework Name

4.1CurrentMUI 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,

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

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: