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

Question

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:

===apex-Controller===

public with sharing class ContactController {

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

}

====Component===

<aura:component controller="ContactController">

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

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

({
doInit : function(component, event) {
    var action = component.get("c.getList");
    action.setCallback(this, function(a) {
        component.set("v.contacts", a.getReturnValue());
    });
    $A.enqueueAction(action);
},
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");
    navEvt.setParams({

        "recordId": selectedId,

        "slideDevName": "detail"

    });

    navEvt.fire(); 

},
})

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:

<li>
        <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}">
                X
                <span class="slds-assistive-text">Close dialog</span>
            </button>
            <header class="slds-popover__header slds-p-vertical_medium">
                <h2 id="dialog-heading-id-1" class="slds-text-heading_medium">Your Card Header</h2>
            </header>
            <div class="slds-popover__body" id="dialog-body-id-6">
                <p>Your card body</p>
            </div>
            <footer class="slds-popover__footer">
            </footer>
        </section>

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');

}