Salesforce LWC : Compact Layout on Hover

Salesforce LWC : Compact Layout showing on Hover

Sometime we have requirement to show Account name link on standard views, a popup with the Compact Layout shows the details of that record.

---

LWC Parent Component : Template (HTML Code)

<template>
	<lightning-card  title="Account Details">
        <lightning-record-view-form
                record-id={recordId}
                object-api-name="Account">
                <div class="slds-box">
                    <!-- Tooltip-->
                    <div style="display:none;position: absolute;opacity:0" class="ModelTooltip">
                        <c-compact-layout-on-hover record-id={recordId} ></c-compact-layout-on-hover>
                    </div>
                    <lightning-output-field field-name="Name" onmouseout={handleMouseout} onmouseover={handleMouseover}>
                    </lightning-output-field>
                </div>
        </lightning-record-view-form>
    </lightning-card>
</template>

---

LWC : JS (Process Code)

import { LightningElement,api } from 'lwc';

export default class AccountComponent extends LightningElement {
   @api recordId;
    @track objRecordId;
    handleMouseover(event) {
        console.log(this.recordId);
        this.objRecordId = null
        const toolTipDiv = this.template.querySelector('div.ModelTooltip');
        toolTipDiv.style.opacity = 1;
        toolTipDiv.style.display = "block";
        // eslint-disable-next-line
        window.clearTimeout(this.delayTimeout);
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout = setTimeout(() => {
            this.objRecordId = this.recordId;
        }, 50);
    }

    /* Handle Mouse Out*/
    handleMouseout() {
        const toolTipDiv = this.template.querySelector('div.ModelTooltip');
        toolTipDiv.style.opacity = 0;
        toolTipDiv.style.display = "none";
    }
}

---

LWC : XML (Config Code)

<!--xml version="1.0" encoding="UTF-8"?-->
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

---

LWC Child Component (CompactLayoutOnHover) : Template (HTML Code)

<template>
      <div>
        <template if:true={recordId} >
        <div style="position: absolute; opacity: 1" class="ModelTooltip">
            <section class="slds-popover slds-popover_panel slds-nubbin_top-left" role="dialog">
              <div class="slds-popover__header">
                <header class="slds-media slds-media_center slds-m-bottom_small">
                  <div class="slds-media__body">
                    <h2 class="slds-text-heading_medium slds-hyphenate">Account Details</h2>
                  </div>
                </header>
              </div>
              <div class="slds-popover__body">
                <lightning-record-form record-id={recordId} object-api-name="Account" layout-type="Compact" columns="1" mode="readonly"> </lightning-record-form>
              </div>
            </section>
          </div>
          </template>
      </div>
</template>

---

LWC : JS (Process Code)

import { LightningElement,api } from 'lwc';

export default class PopoverComponent extends LightningElement {
    @api recordId;
}

---

LWC : XML (Config Code)

<!--xml version="1.0" encoding="UTF-8"?-->
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

---

LWC :Output

Happy Sharing...

Everyone has their own favorites, so please feel free to share with yours contacts and comments below for any type of help!