JSFiddle - React, Tailwind, and code Playground

by steveambielli

HTML

<a href="#" title="Tooltip vCard" data-userid="62">First Last</a>

CSS

a {
    font-size: 16px;
    position: relative;
    z-index: 1;
}

.v-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100px;
    background: #ccc;
}

JavaScript

jQuery.noConflict();
jQuery(document).ready(function(){
   var $userCard = '';
   jQuery('a').hover( 
       function() {
           var $userID = jQuery(this).data('userid');
           //Let's see if variable exists
           //and we can use that instead
           //of making another ajax call.
           if ($userCard) {
               jQuery('a').append($userCard);
           } else {
               jQuery.ajax({
                 url: '#',
                 data: $userID          
               }).done(function(data){
                 $userCard = '<div class="v-card" data-id="'+$userID+'">First Last</div>';
                 jQuery('a').append($userCard);
               }).fail(function(){
                 console.log('There was an error.');  
               });
           }
       },
       function() {
           jQuery('.v-card').each(function(){
              jQuery(this).remove(); 
           });
       }
   );
});