0

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?
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";
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.