How to Create a Tooltip in Lightning Datatable (LWC)

Quick guide to add hover tooltips to Lightning datatables so users can preview related Account details without leaving the table.

Overview

This tutorial shows how to build a Lightning Web Component (LWC) datatable that displays Contact records with an Account Name column that acts as a clickable link and shows a tooltip on hover with key Account fields (Phone and Billing Address). Tooltips provide a fast preview experience similar to Classic’s mini page layouts, but implemented in Lightning using the datatable tooltip attribute.

What you need

• Salesforce org with Apex and LWC enabled
• Basic knowledge of Apex and Lightning Web Components

Solution overview

The approach:

• Retrieve Contact and related Account fields via an Apex @AuraEnabled cacheable method.
• Transform the data in the LWC JS to add fields for: AccountName, AccountUrl and accountToolTip.
• Configure the lightning-datatable Account column as type=”url” and pass the tooltip via typeAttributes.

Apex controller

Use a cacheable Apex method to fetch Contact and Account fields (limit 10 for demo):

/**
* @File Name : ContactsController.cls
* @Description : Returns Contact list with related Account fields used for tooltip
*/
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 ];
    }
}

LWC JavaScript

Transform the wired data to include AccountName, AccountUrl (a Lightning record URL), and accountToolTip string (Phone + Address). The tooltip uses a newline character to improve readability in the browser native tooltip.

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 ? item.Account.Name : '',
                AccountUrl: item.AccountId ? `/lightning/r/Account/${item.AccountId}/view` : '',
                accountToolTip: item.Account ? `Phone : ${item.Account.Phone}\nAddress : ${item.Account.BillingStreet}, ${item.Account.BillingCity}, ${item.Account.BillingState} ${item.Account.BillingPostalCode}` : ''
            }));
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
            console.error(JSON.stringify(this.error));
        }
    }
}

LWC HTML

Simple card containing the datatable:

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

Tips & best practices

• Make sure Account fields you reference (Phone, BillingStreet, etc.) are returned from Apex — check for nulls before using.
• Tooltips rely on the browser’s native tooltip behavior; keep content concise (one or two lines) for best readability.
• For richer previews consider building a custom popover component (lightning-tooltip, lightning-popover or a custom modal) instead of native tooltips.

Key takeaways

• Quick previews reduce clicks and speed up user workflows.
• Using typeAttributes.tooltip on a url column is a lightweight way to add hover previews.
• Always guard against null related records when transforming data.

Why this matters: Tooltips help Salesforce admins and developers deliver fast, contextual information directly in list views and datatables — improving productivity for sales and service users who need quick reference data without leaving their current context.