Then add jQuery.min.js and hoverCard.min.js.

Add any class on the elements which needs to display hoverCards and then add data-dev-id attribute to the same tag which carries the id of the object whose detail needs to be shown in card.

Initialize the plugin:

            
              $('.hoverOn').hoverCards({
                url: 'https://getUserData/', //passing general url to which id stored in 'data-dev-id' can be appended
                backgroundColor: '#ddd', // to change the color of the card,
                fadeIn: 400, // fade in time in milliseconds
                fadeOut: 200, // fade out time in milliseconds
                delay: 1300 // triggers the hoverCard if user hovers for more than delay specified
              });
            
          

The data returned from the url should be in json and in the following format only.

            {
              "name": "Joyce Ross",
              "role": "Web Developer, Zomato",
              "followers": "1k",
              "following": "890",
              "solved": "48",
              "about":"UI/Product Designer",
              "pic": "https://randomuser.me/api/portraits/med/women/31.jpg"
            }
          

Note: If you want to change the format and card layout feel free to hack it.

Demo: