How to Create a Tooltip in Lightning Datatable

Posted by Vinay Vernekar 11th September 2025

Add hover tooltips to lightning-datatable account links showing phone and address using LWC and Apex.

Overview

This article shows a practical approach to add a tooltip to an Account Name link inside a lightning-datatable built with a Lightning Web Component (LWC). The tooltip provides quick access to the Account’s Phone and Billing Address without navigating away from the table — similar to the Classic mini page layout experience but implemented for Lightning Experience.

What you need

  • An Apex controller to query Contact and Account fields.
  • A Lightning Web Component with a lightning-datatable.
  • Configure the Account column as a URL and set its tooltip attribute dynamically.

1. Data preparation (Apex)

Query Contact records with related Account fields (Name, Phone, Billing Address). Mark the Apex method @AuraEnabled(cacheable=true) so it can be used with @wire and supports client-side caching.

public class ContactsController {
    @AuraEnabled(cacheable=true)
    public static List getContacts(){
        return [SELECT Id,Name,Phone,Email,AccountId,Account.Name,Account.Phone,
            Account.BillingStreet,Account.BillingCity,Account.BillingState,
            Account.BillingpostalCode
            FROM Contact
            LIMIT 10 ];
    }
}

2. LWC – JavaScript

Use the wired Apex method to transform contact rows so the datatable receives a URL field (AccountUrl), a label (AccountName) and a tooltip string (accountToolTip). The tooltip supports multi-line text; include phone and formatted address.

import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactsController.getContacts';

const columns = [
    { label: 'Contact Name', fieldName: 'Name', type: 'text' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' },
    { label: 'Email', fieldName: 'Email', type: 'email' },
    {
        label: 'Account Name',
        fieldName: 'AccountUrl',
        type: 'url',
        typeAttributes: {
            label: { fieldName: 'AccountName' },
            target: '_blank',
            tooltip: { fieldName: 'accountToolTip' },
        },
    },
];

export default class ToolTipExample extends LightningElement {
    contacts = [];
    error;
    columns = columns;

    @wire(getContacts)
    wiredContacts({ error, data }) {
        if (data) {
            this.contacts = data.map((item) => ({
                ...item,
                AccountName: item.Account?.Name || '',
                AccountUrl: item.AccountId ? `/lightning/r/Account/${item.AccountId}/view` : '',
                accountToolTip: `Phone : ${item.Account?.Phone || 'N/A'}\nAddress : ${item.Account?.BillingStreet || ''}, ${item.Account?.BillingCity || ''}, ${item.Account?.BillingState || ''}`,
            }));
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }
}

3. LWC – HTML

A simple card containing the lightning-datatable. Use key-field=”Id” and hide-checkbox-column if you don’t need row selection.

<template>
  <lightning-card title="Contacts Table With ToolTip">
    <lightning-datatable key-field="Id" data={contacts} hide-checkbox-column columns={columns} >
    </lightning-datatable>
  </lightning-card>
</template>

Notes and Best Practices

  • Use cacheable=true for read-only Apex methods to improve performance with @wire.
  • Guard against null relationships (e.g., item.Account may be null) when building the tooltip string.
  • Keep tooltip content concise — show the most useful fields (phone, short address) to avoid cluttered popups.
  • If you need richer content (images or formatted HTML), consider a custom cell renderer or a popover component instead of the standard tooltip attribute.

Conclusion

Adding tooltips to a lightning-datatable Account link is an efficient way to give users quick access to related record information without navigation. This pattern improves productivity for users who frequently scan records and reduces context switching.

Why this matters for Salesforce admins and developers:

  • Admins can deliver better UX without changing page layouts or adding custom record pages.
  • Developers can implement lightweight, performant UI enhancements using standard LWC + Apex patterns.
  • Business users get faster access to key data points, improving decision speed and reducing clicks.

#datatable #LWC #tooltip #lightning-datatable #Salesforce

For more, please follow our page!

Tags: