How to Display Tooltip on Salesforce Lightning Data Table?

In Salesforce Lightning web components, we use the lightning-helptext tag with the content attribute to display the Tooltip Text. The tooltip text is similar to the help text we define for the object fields while creating them.

In this Salesforce tutorial, we will learn about the Tooltip feature and how to display a tooltip in the Salesforce Lightning data table.

Table of Contents

What is a Tooltip in Salesforce Lightning Web Components?

In Salesforce Lightning Web Components (LWC), a tooltip is a pop-up element that displays brief, relevant information about a UI element when a user hovers over or clicks on it. The element can be an object field, the header of a data table, or cells in the Lightning data table. To define the tooltip in the LWC component, we use the extension lightning-helptext in the HTML file.

This tooltip displays text that can be information about the record field or instructions for the user to fill in the details in the field. This is similar to the help text that we add to the object fields.

Display Tooltip on Salesforce Lightning Data Table

In the steps below, I will first create a sample LWC component to show the method of adding the tooltip. Then, we will display the tooltip in the Salesforce Lightning data table.

Add Tooltip in Salesforce Lightning Web Components

To add or display a tooltip in the Salesforce Lightning web components, create an LWC component and follow the steps below.

Enter the code below in the HTML to display the tooltip in the LWC component.

<template>
    <lightning-card>
        <div class="slds-m-around_medium">
            Salesforce LWC Tooltip <lightning-helptext content= "This is the tool tip Help Text">
            </lightning-helptext>
            <lightning-input variant="label-hidden"></lightning-input>
        </div>
    </lightning-card>    
</template>

To add the tooltip in the LWC component, we have used the extension <lightning-helptext>, and within this, using content, we have defined the text that will appear when hovering over the tooltip icon.

We are displaying a sample text in the component with a tooltip, so the JS file code will remain as it is.

import { LightningElement } from 'lwc';

export default class ToolTipText extends LightningElement {}

Enter the code below in the meta.xml file to make the component visible to the Lightning pages.

isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>

Deploy the LWC component to the lightning page, and after this, you will see an info icon in the LWC component, and when we hover on the icon, it will display the tooltip text that we have entered in the content.

How to display tooltip in Salesforce Lightning web components

This way, we can add a tooltip in Salesforce Lightning web components using the lightning-helptext component.

Add Tooltip in Salesforce LWC Lightning Data Table

When creating a lightning data table using LWC, we can display a Tooltip in the data table. For this, we will use the built-in typeAttributes.tooltip from the lightning-datatable component.

According to the lightning-datatable documentation, Tooltip configuration is not allowed for fields other than a URL data type.

In the example below, we will display account records in the data table and add a tooltip hover text to the website column.

Create a controller class to fetch the account field records and the URL field website.

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
     public static List<Account> getAccounts() {
        return [SELECT Id, Name, Website, Industry, AnnualRevenue 
                FROM Account 
                LIMIT 50];
    }
}

Enter the code below in the HTML file to render the UI of the data table and bind the data from the JS file.

<template>
    <lightning-card title="Account List" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <lightning-datatable
                key-field="Id"
                data={accounts}
                columns={columns}
                onrowaction={handleRowAction}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

After this, enter the code below in the JS file, where we have defined the logic of displaying the tooltip text on the URL field column values.

import { LightningElement, wire } from 'lwc';
import { getRecordUi } from 'lightning/uiRecordApi';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

const columns = [
    { label: 'Account Name', fieldName: 'Name', type: 'text' },
    { 
        label: 'Website', 
        fieldName: 'Website', 
        type: 'url',
        typeAttributes: {
            tooltip: { 
                fieldName: 'WebsiteTooltip' 
            },
            label: { 
                fieldName: 'Website' 
            },
            target: '_blank'
        }
    },
    { label: 'Industry', fieldName: 'Industry', type: 'text' },
    { label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency' }
];

export default class AccountTable extends LightningElement {
    accounts;
    columns = columns;
    error;

    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data.map(account => ({
                ...account,
                WebsiteTooltip: account.Website ? 'Visit ${account.Name}'s website' : 'No website available'
            }));
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accounts = undefined;
            console.error('Error retrieving accounts:', error);
        }
    }

    handleRowAction(event) {
        const actionName = event.detail.action.name;
        const row = event.detail.row;
    }
}

In the above code, we have defined the website field type as “URL” to render it as a clickable link. Then the typeAttributes customise the URL column’s behaviour and tooltip.fieldName: ‘WebsiteTooltip’ specifies that the tooltip text will come from a field called ‘WebsiteTooltip‘.

In the data mapping of the URL field Websitetooltip, we have defined the attribute ‘Visit ${account.Name}’s website’ to dynamically display tooltip text for different record names.

With this, the data table will automatically display tooltips when users hover over the website links in the data table.

Enter the code below in the meta.xml file to expose the LWC component to the Lightning page.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

Deploy the LWC component to the lightning page, and after, when we hover on the website column values, it will display a tooltip text ” Visit {website name}“.

This way, we can display the tooltip on the Salesforce Lightning data table using the “typeAttributes.tooltip” attribute and display text on the table column values with hover or click.

Conclusion

In this Salesforce tutorial, we have learned how to implement tooltips in Salesforce Lightning Components to display help text in the fields. In the above examples, we have implemented a tooltip in the Lightning web component using the lightning-helptext tag.

After this, we added a tooltip in the LWC lightning data table using the attribute typeAttributes.tooltip, through which we displayed help text in the URL field column.