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 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 implements the tooltip blueprint in the Salesforce Lightning Design System (SLDS).

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

Visit utility icons to view the utility icons.

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

Use the icon-variant 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

To apply additional styling, use the SLDS utility classes with the class attribute.

This example adds a margin to the left of the tooltip icon using the slds-m-left_xx-small class.

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Tooltip: Styling Hooks Overview for documentation on component-specific hooks for this component.

lightning-helptext contains the same customizable elements as lightning-button-icon for the button icon. See the lightning-button-icon documentation.

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 alternative-text 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.