LWC: How do I display "out of box" object hover?
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:
<template>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Name">Name</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Age">Age</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Birthday">Birthday</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Height">Height</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Sex">Sex</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Weight">Weight</div>
</th>
</tr>
</thead>
<tbody>
<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>
<td data-label="Bear Age" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Age">{bear.Age__c}</div>
</td>
<td data-label="Bear Birthday" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Birthday">{bear.Birthday__c}</div>
</td>
<td data-label="Bear Height" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Height">{bear.Height__c}</div>
</td>
<td data-label="Bear Sex" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Sex">{bear.Sex__c}</div>
</td>
<td data-label="Bear Weight" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Weight">{bear.Weight__c}</div>
</td>
</tr>
</template>
</div>
</template>
</tbody>
</table>
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.
Example:
showData(event){
this.ranger = event.currentTarget.dataset.rangerid;
this.left = event.clientX;
this.top=event.clientY;
}
hideData(event){
this.ranger = "";
}
My popover in returns, simply passes the id attribute aka, myranger
to the record-view-form component:
<template>
<div>
<template if:true={ranger} >
<lightning-record-view-form
record-id={ranger}
object-api-name="Contact">
<div class="potato slds-box" style={boxClass}>
<lightning-output-field field-name="Name">
</lightning-output-field>
<lightning-output-field field-name="Email">
</lightning-output-field>
</div>
</lightning-record-view-form>
</template>
</div>
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.
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