function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SFDC GuestSFDC Guest 

Show form on mouse hover using Lightning component

Hi All,

I have written lightning component to display accounts. Can you please let me know how to display popup modal (with Account Name, Description) when keeping the mouse hover on Account name using overlay library component. recordviewform component should be called and displayed as modal when keeping mouse on account name.  Thanks in advance.
 
AccountListController.cmp

<aura:component controller="AccountListController"
                implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable" >
    
    <aura:attribute type="Account[]" name="acctList"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
    
    <lightning:datatable data="{! v.acctList }" 
                         columns="{! v.mycolumns }" 
                         keyField="id"
                         hideCheckboxColumn="true"/>
    
</aura:component>


JS Controller:

({
    fetchAccounts : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Account Name', fieldName: 'Name', type: 'text'},
                {label: 'Industry', fieldName: 'Industry', type: 'text'},
                {label: 'Type', fieldName: 'Type', type: 'Text'}
            ]);
        var action = component.get("c.fetchAccts");
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.acctList", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})


Server Side Controller:

public class AccountListController {
    
    @AuraEnabled
    public static List < Account > fetchAccts() {
        return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 10 ];
    }
    
}

recordviewform.cmp:

<aura:component>
    <lightning:recordViewForm recordId="{recordId}" objectApiName="Account">
        <div class="slds-box">
            <lightning:outputField fieldName="Name" />
            <lightning:outputField fieldName="Description" />
        </div>
    </lightning:recordViewForm>
</aura:component>

 
ANUTEJANUTEJ (Salesforce Developers) 
Hi there,

There is an option called as minipage layout have you tried checking it out? I think you can have a look at the below information for reference:

Mini Pagelayout : A mini page layout contains a subset of the items in an existing page layout. Mini page layouts inherit record type and profile associations, related lists, fields, and field access settings from their associated page layout. The visible fields and related lists of the mini page layout can be further customized, but the other items inherited from the associated page layout cannot be changed on the mini page layout itself.
 
The event mini page layout is used for the event detail and edit overlays, not the Console tab. Related lists on mini page layouts only display in the Console tab, not hover details.
 
To define a mini page layout:
 
a. Click Your Name | Setup | Customize and choose a standard object, or click Your Name | Setup | Develop | Objects and choose a custom object.
b. Select Page Layouts, and choose a page layout name.
c. Click Mini Page Layout.
d. Select which fields and related lists will be displayed for this type of record in the mini view. For each related list you select, choose which fields to display in that related list.

I hope this helps and in case if this comes handy can you please choose this as best answer so that it can be used by others in the future.

Regards,
Anutej