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.

1<template>
2    <lightning-helptext content="Your email address will be your login name">
3    </lightning-helptext>
4</template>

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). The tooltip adapt to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

Use a combination of icons, variants, and utility classes to customize your tooltip styles.

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.

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.

1some text that appears before the tooltip icon here
2<lightning-helptext
3    icon-name="utility:salesforce1"
4    content="tooltip content here"
5    class="slds-m-left_xx-small"
6></lightning-helptext>

Component styling hooks provide CSS custom properties that use the --slds-c-* prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the SLDS 1 component blueprints for available component styling hooks.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

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.