Utilize Salesforce Tooltip behaviour with Compact Layouts

Question

I want to add Custom Links in our custom app which references Salesforce Records. Therefor I want the same behaviour like in other records: If you hover over the link the Compact Layout is used to display the Record as Tooltip.

How can be this achived? I would like to use the salesforce build in functions. I think I could create also a tooltip with embeded html as described from w3s (https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tooltip_html&stacked=h)

1. Is it possible to utilize the salesforce functions?
2. If not which would be the best approach?

Answer 1

you can try below sample code will work for your scenario

<!-- Tooltip-->
<div style="display:none; opacity:0" class="ModelTooltip">
    <section class="slds-popover slds-popover_panel slds-nubbin_left-top" 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">
                        Title
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-popover__body">
            <lightning-record-form record-id={objRecordId} object-api-name={objectapiName}
                layout-type="Compact" columns="1" mode="readonly">
            </lightning-record-form>
        </div>
    </section>
</div>

/* Handle Mouse Hover*/
handleMouseover(event) {
    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 = event.recordId;
    }, 50);
}

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