[Resolved]: Add Tooltip over a field section using visual force page in Object Page Layout.

Introduction/SCenario

There was a need of implementing tooltip on mouse hover for field section label on the object page layout for one of the our client - consulting firm based out of Atlanta, GA, USA.

We, all are familiar with showing tooltip on page layout by dragging & dropping the Lightning Component for a specific object field on the page layout, but displaying a tooltip on the Field Section label on the record/object page layout is quite challenging. So, in this blog, I will go through in detail how Tooltip can be displayed on the mouse hover for Field Section label on the object page layout.

APPROACH

To display the tooltip on the field section label, we need to utilize custom Visual Force page in the page layout. In that page, we can have customized HTML & CSS to show tooltip on the mouse hover.

PROCESS

I've developed a custom solution that involves creating a custom Visual Force Page called ToolTip. This Page contains the mechanism to display the Tooltip of  Account Name. The page needs to be customized using HTML and CSS to show the tooltip of an Account name on a Field Section Label.

ToolTip.vfp

After creating the visual force page, we need to drag & drop the page to the specific record page layout. As, I need to show tooltip of Account Name, I've used it on the account page layout.

OUTPUT

If you have any questions you can reach out our Salesforce Consulting team here.

Display "mini page layout" on hover in Lightning Component

Requirement:

There was a requirement, while working with one of the clients, to provide an interface which would display mini page layout on hover of the Lightning component. This layout had to be customized and shown on MouseHover of the Contact object field.

Challenge: 
In Lightning, the mini page layout is only available for the fields which have a lookup or have a master-detail relationship. There is no out-of-the-box (OOTB) functionality available to display linked record field values in the pop-up in lightning component.

Solution:
To overcome this limitation, we developed a custom solution which involved creating an apex class called ContactsController. This class contains the mechanism to retrieve the list of contacts along with related accounts. This class is used by Custom Lightning Component to display the list of contacts with a pop-up functionality.

ContactsController class

public class ContactsController {
    @AuraEnabled
    public static List <contact> getContacts() {
        return [SELECT Id, name,phone, Contact.account.Name, Contact.account.industry, Contact.account.Type,
                Contact.account.Phone  FROM contact ORDER BY createdDate ASC];
    }
}

ContactsController class is referenced by MouseHover component to display retrieved contacts as a data table and use JavaScript Controller to illustrate contacts only from the list.

MouseHover.cmp

<aura:component controller="ContactsController">
    <aura:attribute name="contacts" type="List" />
    <aura:attribute name="conAccLst" type="List" />
    <aura:attribute name="reId" type="Id" />
    <aura:attribute name="mouseHoverData" type="object" />
    <aura:attribute name="togglehover" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="hoverRow" type="Integer" default="-1" />
    <!-- Use a data table from the Lightning Design System: https://www.lightningdesignsystem.com/components/data-tables/ -->
    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
        <thead>
            <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate" title="Name" style="text-align: center">Contact Name</div></th>
                <th scope="col"><div class="slds-truncate" title="Phone" style="text-align: center">Phone</div></th>
            </tr>
        </thead>
        <tbody>
            <!-- Use the Apex model and controller to fetch server side data -->
            <aura:iteration items="{!v.contacts}" var="contact" indexVar="index">
                <tr data-selected-Index="{!index}">
                    <td><div class="slds-truncate" title="{!contact.Name}" style="text-align: center">
                        <a id="{!contact.Id}" onmouseenter="{!c.handleMouseHover}" onmouseout="{!c.handleMouseOut}" data-index="{!index}" tabindex="-1">{!contact.Name}</a></div>
                        <aura:if isTrue="{!v.hoverRow==index}">
                            <aura:if isTrue="{!v.togglehover==true}">
                                <div   class="slds-popover slds-nubbin_bottom"
                                     role="tooltip" id="help" style="position: absolute; right: 225px; bottom: 100%; width: 22rem; padding: inherit;">
                                    Account Name: {!v.mouseHoverData.Name}<br/>
                                    Phone:{!v.mouseHoverData.Phone}<br/>
                                    Type:{!v.mouseHoverData.Type}<br/>
                                  
                                </div>
                            </aura:if>
                        </aura:if>
                    </td>
                    <td><div class="slds-truncate" title="{!contact.Phone}" style="text-align: center">{!contact.Phone}</div></td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

MouseHoverController.js retrieves all contacts on the load event of MouseHover Component and call MouseHoverHelper javascript file on hover of any contact name to display a pop-up with related account details.

MouseHoverController.js

({
    doInit: function(component, event, helper) {
        // Fetch the Contact list from the Apex controller
        helper.getAccountList(component);
    },
    handleMouseHover: function(component, event, helper) {
        var my = event.srcElement.id;
        component.set("v.reId",my);
        helper.getMiniLayout(component, event, helper)
    },
    handleMouseOut: function(component, event, helper) {
        component.set("v.hoverRow",-1);
        component.set("v.togglehover",false);
    }
})

MouseHoverHelper fetches the related account details as a pop-up on hover of a contact name.

MouseHoverHelper.js 

({
    // Fetch the Contact from the Apex controller
    getAccountList: function(component) {
        var action = component.get('c.getContacts');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            var result = actionResult.getReturnValue();
            component.set('v.contacts', result);
            var conAccList = [];
            for(var i=0 ; i<result.length;i++){
                conAccList.push({"Id":result[i].Id, "value":result[i]});
            }
            component.set('v.conAccLst', conAccList);
        });
        $A.enqueueAction(action);
    },
    //Fetch the releted account on mouseHover 
    getMiniLayout:function(component, event, helper){
        
        var getAccount = component.get('v.conAccLst');
        for(var i=0;i<getAccount.length;i++){
            if(getAccount[i].Id == component.get("v.reId")){
                component.set('v.mouseHoverData', getAccount[i].value.Account);
                break;
            }
        }
        component.set("v.hoverRow", parseInt(event.target.dataset.index));
        component.set("v.togglehover",true);
    }
})

After this, we have created a Lightning App to integrate all of the files as a solution. 

Sample.app 

<aura:application extends="force:slds">
    <c:MouseHover />
</aura:application>

Output :

If you have any questions you can reach out our Salesforce Consulting team here.