Helptext

A lightning:helptext component displays an icon with a popover containing a small amount of text describing an element on screen. The popover is displayed when you hover or focus on the icon that's attached to it. On iOS devices, the helptext popover opens when you tap on the icon and closes with a second tap on the popover or the icon.

This component is similar to a tooltip and is useful to display field-level help text, for example. HTML markup is not supported in the tooltip content.

This component implements styling from tooltips in the Lightning Design System.

By default, the tooltip uses the utility:info icon but you can specify a different icon with the iconName attribute. The Lightning Design System utility icon category offers nearly 200 utility icons that can be used in lightning:helptext. Although the Lightning Design System provides several categories of icons, only the utility category can be used in lightning:helptext.

Visit https://lightningdesignsystem.com/icons/#utility to view the utility icons.

When applying Lightning Design System classes or icons, check that they are available in the Lightning Design System release tied to your org. The Lightning Design System site shows the latest Lightning Design System resources, and these become available only when the new release is available in your org.

Use the iconVariant attribute to change the style of the icon with the following values.

• bare is the default variant and doesn't need to be specified
• error adds a red fill for the icon to call out a user- or system-related error
• inverse adds a white fill for the icon, useful for dark backgrounds
• warning adds a yellow fill for the icon to advise caution

This example creates an icon with a tooltip.

The popover is anchored on the lower left of the icon and shown above the icon if space is available. It automatically adjusts its position according to the viewport.

lightning:helptext contains a focusable button element. To ensure that users who aren't using a mouse can access the tooltip, lightning:helptext shows the tooltip on hover or on keyboard focus when you press Enter or the spacebar. To dismiss the tooltip when it displays on hover, mouse away from it. To dismiss the tooltip when it has focus, press Escape.

The button renders with an aria-describedby attribute set to an ID that matches the element containing the tooltip text. The aria-describedby attribute enables assistive technology to announce the tooltip content. The button renders assistive text that contains "Help" by default. To provide your own description, use the alternativeText attribute. The text should describe the function of the icon, for example, "Show help text", instead of repeating the content description. Providing the purpose of the icon in the description improves usability and removes repetition of content for users of assistive technology.

The component renders the tooltip using role="tooltip". When you remove focus from the button or mouse away from it, the tooltip is hidden. To provide important information, display descriptive text in the component itself instead of using lightning:helptext.

The content attribute doesn't have a character limit. However, when this component is used for field-level help text on a Salesforce record, the character limit is 510.

For more information, see Define Field-Level Help in Salesforce Help.