I have lightning component and want to show a lightning card on mouseover on the link, is there any lightning event I can call to show to popup mobile card? this is my code:


public with sharing class ContactController {

public static List<Contact> getList() {
    return [SELECT id, name, phone FROM Contact LIMIT 50];



<aura:component controller="ContactController">

<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <aura:iteration items="{!v.contacts}" var="contact">
            <a  href="javascript:void(0)" data-contactId="{!contact.Id}" onclick="{!c.customRedirect}">{!contact.Name}</a>

doInit : function(component, event) {
    var action = component.get("c.getList");
    action.setCallback(this, function(a) {
        component.set("v.contacts", a.getReturnValue());
customRedirect : function (component, event){

    var selectedItem = event.currentTarget;
    var selectedId = selectedItem.dataset.contactId;

    console.log("selected ID = "+selectedId);          

    var navEvt = $A.get("e.force:navigateToSObject");

        "recordId": selectedId,

        "slideDevName": "detail"



  • 1
    would you mind sharing a minimal code sample of your component and controller if any, so other can reproduce and assist? This will also allow others to see what you have attempted so far and better assist you. Thanks!
    – glls
    Commented May 14, 2017 at 16:59
  • 1
    @Faisal - You should not be coding URLs like that. They are subject to change and will potentially break your code int he future if done like that. You should be using URLFOR - see - trailhead.salesforce.com/en/modules/lex_dev_visualforce/units/…
    – Eric
    Commented May 14, 2017 at 17:49
  • @glls i have updated my code can you please check the code and let me know how can i show popup mobile card on mouse over
    – Faisal
    Commented May 15, 2017 at 13:18
  • @Eric i am using the lightning event can you please look into the code
    – Faisal
    Commented May 15, 2017 at 13:20

1 Answer 1


you can use popovers from slds.

Here's a rough sample from component where Contact Record is the hyperlinked text and anything within the section tag is the card, you can make it lightning:card or whatever. I used slds-popover for aesthetics:

        <a  href="javascript:void(0)" onmouseover="{!c.openPop}" onmouseout="{!c.closePop}">Contact Record</a></li>
        <section aura:id="pop" class="slds-popover slds-nubbin_top slds-hide" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-body-id-6">
            <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog" onclick="{!c.closePop}">
                <span class="slds-assistive-text">Close dialog</span>
            <header class="slds-popover__header slds-p-vertical_medium">
                <h2 id="dialog-heading-id-1" class="slds-text-heading_medium">Your Card Header</h2>
            <div class="slds-popover__body" id="dialog-body-id-6">
                <p>Your card body</p>
            <footer class="slds-popover__footer">

Here's the controller where we have the method that opens and closes the popover:

openPop : function(component, event, helper) {
    var cmpTarget = component.find('pop');
    $A.util.addClass(cmpTarget, 'slds-show');
    $A.util.removeClass(cmpTarget, 'slds-hide');


closePop : function(component, event, helper) {
    var cmpTarget = component.find('pop');
    $A.util.addClass(cmpTarget, 'slds-hide');
    $A.util.removeClass(cmpTarget, 'slds-show');


enter image description here

  • Is it supposed to work without using overlayLib? because I am trying that and is not working...
    – Raphael D
    Commented Feb 10, 2020 at 10:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .