lightning:helptext

An icon with a text popover.

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. 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 inherits styling from tooltips in the Lightning Design System.

By default, the tooltip uses the utility:info icon. 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:buttonIcon.

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

This example creates an icon with a tooltip.

<aura:component>
    <lightning:helptext
        content="Your email address will be your login name" />
</aura:component>

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.

Attributes

Attribute Name Attribute type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS class for the outer element, in addition to the component's base classes.
title String Displays tooltip text when the mouse moves over the element.
content String Text to be shown in the popover.
iconName String The Lightning Design System name of the icon used as the visible element. Names are written in the format 'utility:info' where 'utility' is the category, and 'info' is the specific icon to be displayed. The default value is 'utility:info'.