JSFiddle - React, Tailwind, and code Playground

by callmepc

HTML

<script src="http://dl.dropbox.com/u/40036711/jquery.hovercard.js"></script>
<p>jQuery by <label id="demo-ajax">@jeresig</label> is a cross-browser JS library designed to simplify the client-side scripting of HTML. It was released in January of 2006 at BarCamp NYC. Used by over 46% of the 10,000 
    most visited websites, it's the most popular JavaScript library in use today.</p>
<p>jQuery is free, open source software, dual-licensed under the MIT License and GNU General Public License, Version 2.[4] jQuery's syntax is designed to make 
    it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.</p>

CSS

body
{
    font-family:Helvetica;
    font-size:12px;
    line-height:1.5em;
}
.t-card .t-img
{
    float:right;
}
.t-card t.href
{
    
}

JavaScript

var hoverHTMLDemoAjax = '<div class="t-card">' + 
    '<img class="t-img" />'+
    '<label id="t-name"></label><br/>'+
    '<a class="t-href"></a>'+
    '<p class="t-desc"></p></div>';

$("#demo-ajax").hovercard({
    detailsHTML: hoverHTMLDemoAjax,
    width: 350,
    onHoverIn: function() {
        // set your twitter username
        var user = 'jeresig';

        $.ajax({
            url: 'http://api.twitter.com/1/users/lookup.json?screen_name=' + user + '&callback=?',
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json',
            success: function(data) {                
                $('#t-name').text(data[0].name);
                $('.t-img').attr('src', data[0].profile_image_url);
                $('.t-desc').text(data[0].description);
                $('.t-href').attr('href', data[0].url).text(data[0].url);
            }
        });
    }
});