Information Bubble (All Fields Types)

  • Updated
Status

Release Available

Status

Framework Name

4.2

Current

MUI only

4.3

Current

MUI only

4.5

Current

MUI only
General

A tooltip, infotip, or hint can be configured with all the fields type. With the help of this feature, a portal administrator now has more flexibility to configure an information bubble. The existing tooltip object now has placement, iconName, and iconSize properties. Tooltips with the placement as label and below are shown for all field types. Tooltips with the placement as inline are shown for all fields with a text field look.

Note

  • All the parameters for 'tooltip" objects can be configured globally as well as by passing values directly from the JSON editor.

  • With the Portal 4.3 release, the tooltip is also visible when the components are configured as non-editable or read-only in a list or card view.

  • With the Portal 4.5 release, you can also use the format property along with the label and tooltip.

Example 23. Code JSON

"tooltip": {
    "content": "Sample tooltip text",
    "placement": "$global.attr(tooltipIconPlacement);",
    "iconSize": "$global.attr(tooltipIconSize);",
    "iconName": "$global.attr(tooltipIconName);",
    "inline": "$global.attr(showInlineToolTips);",
    "position": "$global.attr(tooltipPosition);",
    "withArrow": "$global.attr(tooltipWithArrow);"  }

Where,

  • content: Add the information to display to the user.

  • placement: Location to show the tooltip. The following locations are supported:

    • label

    • inline

    • below - The placement as below retains the existing behavior for the tooltip as a string.

      information-bubble-placements.png

  • iconSize: Size of the tooltip icon to display. This field can have one of the following values:

    • small

    • medium

    • large

  • iconName: Name of the icon. This field supports all the material icons.

    Note

    To view a complete list of material icons, see https://fonts.google.com/icons?icon.set=Material+Icons.

  • inline: Set this to true if you need an inline tooltip. This property is overridden by the "placement" property.

  • 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