How to Create a Tooltip in Lightning Datatable

Hover over an Account link in a lightning-datatable and show that account's phone and address, using LWC and Apex.

Overview

Here is a practical way to add a tooltip to an Account Name link inside a lightning-datatable built with a Lightning Web Component (LWC). The tooltip puts the Account's Phone and Billing Address in front of the user without navigating away from the table, the way the Classic mini page layout used to, but built for Lightning Experience.

What you need

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

1. Data preparation (Apex)

Query Contact records with the related Account fields (Name, Phone, Billing Address). Mark the Apex method @AuraEnabled(cacheable=true) so @wire can call it and the client can cache the result.

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 the contact rows so the datatable gets a URL field (AccountUrl), a label (AccountName) and a tooltip string (accountToolTip). The tooltip handles multi-line text, so include the phone and the 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 get better performance out of @wire.
• Guard against null relationships (e.g., item.Account may be null) when building the tooltip string.
• Keep tooltip content short. Show the most useful fields (phone, short address) so the popup does not get cluttered.
• 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

A tooltip on the lightning-datatable Account link gives users the related record details without a navigation step. For anyone who scans a lot of records, that is one less context switch per row.

Admins get the better experience without touching page layouts or building custom record pages, and developers get it from standard LWC and Apex patterns.

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

For more, please follow our page!