---
schema_version: "1"
id: 4a08381c4c75ae49798574d1662a82ae9079cae66eb130bcee644ed3516a2498
title: Helptext
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/helptext/lightning-helptext.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-helptext.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 25fcf8b01f98998247c863f5eaf3dce1d6f6964742a8acd5374586378f6ba186
products:
  - Lightning Component Reference
---

# Helptext

**`lightning-helptext`**

An icon with a text popover used for tooltips.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="helptext" model="lwc" namespace="lightning"}


:::::

:::::tab

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-helptext content="Your email address will be your login name">
    </lightning-helptext>
</template>
```
<!-- prettier-ignore-end -->

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.

## Design

`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.

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Tooltip](https://v1.lightningdesignsystem.com/components/tooltips/)                                                                  | [Tooltip](https://www.lightningdesignsystem.com/components/tooltips/)                                           |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Component Styling

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

### Icons

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](https://v1.lightningdesignsystem.com/icons/#utility) 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.

### Variants

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

### Utility Classes

To apply additional styling, use the SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.

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

<!-- prettier-ignore-start -->
```html
some text that appears before the tooltip icon here
<lightning-helptext
    icon-name="utility:salesforce1"
    content="tooltip content here"
    class="slds-m-left_xx-small"
></lightning-helptext>
```
<!-- prettier-ignore-end -->

### Styling Hooks

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](https://v1.lightningdesignsystem.com/components/overview/) for available component styling hooks.

For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) 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](/docs/platform/lightning-component-reference/guide/lightning-button-icon.html).

## Accessibility

`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](https://help.salesforce.com/s/articleView?id=platform.customhelp_defining_field_level_help.htm) in Salesforce Help.


:::::

:::::tab
::component-specification{component="helptext" model="lwc" namespace="lightning"}

:::::

::::::