public with sharing class ContactController {

@AuraEnabled
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}" />

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

},
})

<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>

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

}