When you hover over an Account name link on standard views, a popup with the Compact Layout shows the details of that record. enter image description here Is it possible to do this using Lightning Web Components?

Perhaps using the output from getRecordUi? I cannot find any examples online of how to use the results from getRecordUi - how can that be converted to a page layout to display to the user?

Some related links that I found, but did not have answers:



I have lightning component and want to show lightning card when mouse over on the link,


2 Answers 2


You can build a custom lwc in which you embed some sort of 'popover' overlay component. So yes, this is possible.

If your Layout is, for example, a Table, as follows:


<table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <tr class="slds-line-height_reset">
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Name">Name</div>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Age">Age</div>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Birthday">Birthday</div>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Height">Height</div>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Sex">Sex</div>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Weight">Weight</div>
    <template if:true={bears.data}>
        <div class="slds-m-around_medium">
            <template  for:each={bears.data} for:item="bear" for:index="index">

                <tr class={assignClass} key={bear.Id} data-rangerid={bear.Supervisor__c} onmouseout={hideData} onmouseover={showData}>

                    <td data-label="Bear Name" class="slds-cell-buffer_right">
                        <div class=slds-truncate title="Bear Name">{bear.Name}</div>
                    <td data-label="Bear Age" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Age">{bear.Age__c}</div>
                    <td data-label="Bear Birthday" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Birthday">{bear.Birthday__c}</div>
                    <td data-label="Bear Height" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Height">{bear.Height__c}</div>
                    <td data-label="Bear Sex" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Sex">{bear.Sex__c}</div>
                    <td data-label="Bear Weight" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Weight">{bear.Weight__c}</div>


you can "Build" a LWC that will act as a popover (a card for example, with an embeded lightning-record-view-form.

this is a sample lwc that I added at the bottom of my table:

<c-box-popover topmargin={top} leftmarginn={left} myranger={ranger}></c-box-popover>

it basically receives coordinates of where my cursor is located (you can do this as well in the child lwc).

my table component in return has uses onmouseover and onmouseout events for rendering/unrendering the card based on the id that is being passed to it.


    this.ranger = event.currentTarget.dataset.rangerid;
    this.left = event.clientX;
    this.ranger = "";

My popover in returns, simply passes the id attribute aka, myranger to the record-view-form component:

    <template if:true={ranger} >
            <div class="potato slds-box" style={boxClass}>
                <lightning-output-field field-name="Name">
                <lightning-output-field field-name="Email">

and as you can see, I dynamically assign a "style" attribute which I construct using Template literals

get boxClass() { 
    return `background-color:white; top:${this.top - 280}px; left:${this.left}px`;

I did not put much effort in calculating screensize to properly place the popover, but it should give you the general idea.

enter image description hereenter image description here

You can find a sample Gist here

The data i used ot work with can be found on the build-apps-with-lwc Trailhead repository


You're looking for the lightning:overlayLibrary which does not currently have an LWC equivalent. Specifically, this is the popover functionality.


Unfortunately, there is no official word on when this aura service component will move to LWC.

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.