Fork me on GitHub
Now with built in and hovercard! Read more. 

Hovercard

A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice.

What is so cool about this plugin!

  • Smoothly fades the name into a hovered card (in place).
  • Uses minimum css and no external stylesheets to download.
  • Full control over html to be displayed.
  • Comes with built in Twitter and Facebook hovercard.
  • Supports callback functions on hover in and hover out.
  • New! Auto adjust on the edges of viewport.

When should you use hovercard:
A hovercard comes handy when displaying Person bio, Book author and price, Loading related information with Ajax, Editing in place, and what not! Check out the following demos to see some of this stuff in action :)

Demos:

1Basic hovercard

Hover over the red text to see the hovercard in action:

jQuery by 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.

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.

View Source

                                <p>jQuery by <label id="demo-basic">John Resig</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>


                                //plugin script for basic hovercard---
<script 
    type="text/javascript">
$(document).ready(function () {
    var hoverHTMLDemoBasic = '<p>' +
                        'John Resig is an application developer at Khan Academy.
                            He was a ' +
                        'JavaScript tool developer for the Mozilla Corporation.
                            He is also the' +
                        'creator and lead developer of the jQuery JavaScript
                            library.<p>';

    $("#demo-basic").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        width: 400,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg'
    });
});
</script>

2Hovercard open on left

Hover over the red text to see the hovercard in action:

jQuery is a cross-browser JS library designed to simplify the client-side scripting of HTML. It was released in January of 2006 by at BarCamp NYC. Used by over 46% of the 10,000 most visited websites, it's the most popular JavaScript library in use today.

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.

View Source

                                <p>jQuery is a cross-browser JS library designed to simplify the client-side 
scripting of HTML. It was released in January of 2006 by <label id="demo-openLeft">John Resig</label>
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>


                                //plugin script for demo open left---
<script 
    type="text/javascript">
$(document).ready(function () {
    
    var hoverHTMLDemoOpenLeft = '<p>' +
                        'John Resig is an application developer at Khan Academy.
                            He was a ' +
                        'JavaScript tool developer for the Mozilla Corporation.
                            He is also the' +
                        'creator and lead developer of the jQuery JavaScript
                            library.<p>';

    $("#demo-openLeft").hovercard({
        detailsHTML: hoverHTMLDemoOpenLeft,
        width: 350,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg',
        openOnLeft: true
    });
});
</script>

3Hovercard over a hovercard

Hover over the red text to see the hovercard in action:

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

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.

View Source

                                <p>jQuery by <label id="demo-hcOverHc">John Resig</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>


                                //plugin script for demo hovercard over hovercard---
<script 
    type="text/javascript">
$(document).ready(function () {
    
    var hoverHTMLDemoHcOverHcMain = '<p>John
        Resig is an application developer at Khan Academy. He was a JavaScript tool developer
        for the Mozilla Corporation.'+
                                    ' He is also the creator and lead developer of the
                                        jQuery JavaScript library.</p>' +
                                    '<p>Resig is the author of the book <label
                                        id="book">Pro JavaScript Techniques</label> published by Apress
                                        in 2006.</p>' +
                                    '<p>For his work on jQuery he was inducted into
                                        the Rochester Institute of Technologys Innovation Hall of Fame on April 30, 2010.</p>';

    $("#demo-hcOverHc").hovercard({
        detailsHTML: hoverHTMLDemoHcOverHcMain,
        width: 400,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg'
    });

    var hoverHTMLDemoHcOverHcInside = 'Real
        world javascript techniques for the modern, professional web developer.' + 
    '<br/><a href="http://www.amazon.com/gp/product/1590597273/ref=as_li_ss_tl?ie=UTF8&tag=babue-20&linkCode=as2&camp=217145&creative=399369&creativeASIN=1590597273">View
        this on Amazon</a>';

    $("#book").hovercard({
        detailsHTML: hoverHTMLDemoHcOverHcInside,
        width: 300,
        cardImgSrc: 'http://ecx.images-amazon.com/images/I/51wODconOJL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU01_.jpg'
    });
});
</script>

4Hovercard with callback functions

Hover over the red text to see the hovercard in action:

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

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.

View Source

                                <p>jQuery by <label id="demo-callback">John Resig</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>


                                //plugin script for demo callback functions---
<script 
    type="text/javascript">
$(document).ready(function () {
    
    var hoverHTMLDemoCallback = '<p>' +
                        'John Resig is an application developer at Khan Academy.
                            He was a ' +
                        'JavaScript tool developer for the Mozilla Corporation.
                            He is also the' +
                        'creator and lead developer of the jQuery JavaScript
                            library.<p>';

    $("#demo-callback").hovercard({
        detailsHTML: hoverHTMLDemoCallback,
        width: 350,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg',
        onHoverIn: function () {
            //Place your callback code here. This
                example uses notification plugin to demonstrate
            $.notify('We see you just hovered over the label! <br/>Callback
                function <strong>"onHoverIn"</strong>. ', {
                background: '#ffffbb',
                autoHide: true,
                autoHideDelay: 1000,
                clickAnywhereToClose: true,
                position: "bottom-right",
                width: 100
            });

        },
        onHoverOut: function () {
            //Place your callback code here. This
                example uses notification plugin to demonstrate
            $.notify('You hovered out from the hovercard and it
                should have probably disappeared, right!<br/>Callback function <strong>"onHoverOut"</strong>.', {
                background: '#ffffbb',
                autoHide: true,
                autoHideDelay: 1000,
                clickAnywhereToClose: true,
                position: "bottom-right",
                width: 600
            });
        }
    });
});
</script>

5Hovercard with ajax (remote data)

Hover over the red text to see the hovercard in action:

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

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.

View Source

                                <p>jQuery by <label id="demo-ajax">John Resig</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>


                                //plugin script for demo ajax---
<script 
    type="text/javascript">
$(document).ready(function () {
    
    var hoverHTMLDemoAjax = '<p>Recent
        tweets from <label id="twitter-username">the user</label></p><ul
        id="demo-cb-tweets"></ul>';

    $("#demo-ajax").hovercard({
        detailsHTML: hoverHTMLDemoAjax,
        width: 350,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg',
        onHoverIn: function () {
            // set your twitter id
            var user = 'jeresig';

            $.ajax({
                url: 'http://twitter.com/statuses/user_timeline.json?screen_name=' + user + '&count=5&callback=?',
                type: 'GET',
                dataType: 'json',
                beforeSend: function () {
                    $("#demo-cb-tweets").prepend('<p class="loading-text">Loading latest
                        tweets...</p>');
                },
                success: function (data) {
                    $("#demo-cb-tweets").empty();
                    $('#twitter-username').text(user);
                    $.each(data, function (index, value) {
                        $("#demo-cb-tweets").append('<li>' + value.text + '</li>');
                    });
                },
                complete: function () {
                    $('.loading-text').remove();
                }
            });

        }
    });
});
</script>

6Hovercard as In Place Editor

Hover over the red text to see the hovercard in action:

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

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.

View Source

                                <p>jQuery by <label id="demo-inPlaceEditor">John Resig</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>


                                //plugin script for demo in place editor---
<script 
    type="text/javascript">
$(document).ready(function () {
    var hoverHTMLDemoInPlaceEditor = '<div>Hmm!
        People may think that it was him who wrote jQuery when it was actually written by
        <br />' +
                                        '<form>' +
                                        '<input id="funny-input-value" type="text"
                                            /><br/><br/>' +
                                        '<input type="submit" id="btn-funny"
                                            value="Yes, I know it better!" /><br/> ' +
                                        '</form>' +
                                        '<br/><small>This is just for fun!</small>' +
                                        '</div>';

    $("#demo-inPlaceEditor").hovercard({
        detailsHTML: hoverHTMLDemoInPlaceEditor,
        width: 500
    });

    $('#btn-funny').live("click", function (e) {
        e.preventDefault();
        var newText = $('#funny-input-value').val().length > 0 ? $('#funny-input-value').val() : 'Super Man';
        $('#demo-inPlaceEditor').text(newText);
        $('.hc-details').hide();
        $.notify('Updated. By the way do you really think '+ newText + ' wrote jQuery!', {
            background: '#ffffbb',
            autoHide: true,
            autoHideDelay: 6000,
            messageType: "success",
            clickAnywhereToClose: true,
            position: "bottom-right",
            width: 400
        });
    });
});
</script>

7Built-in Facebook Card

facebook Hover over the red text to see the facebook page profile:

by John Resig 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

View Source
<label id="demo-facebook" data-hovercard="8936834181"> jQuery </label> by John Resig 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>     


                                //plugin script for facebook hovercard---
<script 
    type="text/javascript">
$(document).ready(function () {
    
     $('#demo-facebook').hovercard({
           showFacebookCard: true,           
           width: 350
      });
});
</script>

8Built-in Twitter Card

twitter Hover over the red text to see the twitter profile:

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

Please note:
Twitter only allow 100 lookups per hour, so there's a possibility that you might not see any result. We know that sucks but, they have to save their whale too!

View Source

                                <p>jQuery by <label id="demo-twitter" data-hovercard="jeresig" >John Resig</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>


                                //plugin script for twitter hovercard---
<script 
    type="text/javascript">
$(document).ready(function () {
    
    $("#demo-twitter").hovercard({
        showTwitterCard: true,
        width: 350
    });   
});
</script>

How to use:

Following is a very basic example of how to use hovercard. You can also check out live demos with the source for each.


                        //html---
<p>
jQuery by <label id="demo-basic">John Resig</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>


                        //plugin script---
<script 
    type="text/javascript">
$(document).ready(function () {
    var hoverHTMLDemoBasic = '<p>' +
        'John Resig is an application developer at Khan Academy.
            He was a ' +
        'JavaScript tool developer for the Mozilla Corporation.
            He is also the' +
        'creator and lead developer of the jQuery JavaScript
            library.<p>';

    $("#demo-basic").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        width: 400,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg'
    });
});
</script>

Plugin Options:

  • width default value 300
    Width in px for the hovercard i.e. 400, or 400px.
  • openOnLeft default value false
    By default hovercard tries to expand towards right. And If there isn't enough available viewport on right, the plugin adjusts itself to open on left. Set 'openOnLeft' to true if want the hovercard to always open on left. See demo 2.
  • openOnTop default value false
    By default hovercard tries to expand towards bottom. And If there isn't enough available viewport on below, the plugin adjusts itself to open on top. Set 'openOnTop' to true if want the hovercard to always open on top. See demo on jsFiddle.
  • cardImgSrc default value ''
    The hovercard has an optional placeholder for one default image with a width of 70px. This image is positioned on top right for hovercard opening on right, and top left for hovercard opening on left.
  • detailsHTML default value ''
    You can write any html markup (with your classes or ids) for your hovercard details. Or even a simple string would do! There will be no styles added by the plugin to this section of html. This gives you the flexibility to use the hovercard for anything you want. Make it an in place editor, use ajax, show tweets, flicker images etc. This is your html, do whatever! See demo 5 and 6.
  • background default value '#ffffff'
    Background for your hovercard. You can use the css shorthand notation for setting backgrounds
    i.e. background: #CCCCCC; or background: transparent url('your-background-image.jpg') no-repeat 0 0 scroll;
  • onHoverIn default value function () { }
    Callback function when you hover in over the label (or any element) you are using hovercard for. See demo 4.
  • onHoverOut default value function () { }
    Callback function when you are hovered out from the hovercard. See demo 4.
  • ---- Following options are available with version 2.0 and onwards ----
  • showTwitterCard default value false
    Displays a built in twitter card format for a twitter screenname. Maximum 150 twitter lookup per hour. The plugin only makes one twitter request (when first hovered) for each hovercard, avoiding subsequent lookups. See demo 8.
    Note: When using TwitterCard or FacebookCard with detailsHTML, Twitter or Facebook profile data is added before details HTML.
  • twitterScreenName default value ''
    Twitter screen name for the hovercard. See demo 8.

    New!

    Alternatively you can provide the username by adding a 'data-hovercard' attribute with the hovered label/link etc. Recommended when using multiple twitter/facebook hovercard on your page. Using data-hovercard will be as easy as this example:
       <a href="somelink" data-hovercard="chaudharyp" class="hoverme" > Prashant Chaudhary </a>. 
       <a href="somelink" data-hovercard="barackobama" class="hoverme" > Barack Obama </a>. 
                            
       $(".hoverme").hovercard({ showTwitterCard: true });
    *Suggested by :)
    If no username/screenname or data-hovercard is provided, hovercard attempts to look up for hovered text.
  • showFacebookCard default value false
    Displays a built in facebook card format for a facebook username/pages/events etc. Works best with Facebook pages. See demo 7.
  • facebookUserName default value ''
    Facebook username/id/page/event/group/etc. for the hovercard. See demo 7.
    Like twitterScreename, you can also provide the facebook username by adding a 'data-hovercard' attribute with the hovered label/link etc. Read data-hovercard details under twitterScreenName option.
    If no username/pagename/id/etc. is provided either by data-hovercard or in options, hovercard attempts to look up for hovered text.
  • showCustomCard default value false
    You may now add your own custom data source and display the profile data using existing card format. Couple of ways to use this:
    1. Either provide the attribute data-hovercard with hovered label/link to get the complete qualified url (including username) returning JSON.
      <label data-hovercard="http://yourwebsite.com/user/id/911" class="hoverme" > 
          User with id 911! 
      </label>
      $('.hoverme').hovercard({
          showCustomCard: true    
      });
      Note: The remote data url should return the specific JSON format as shown in the next example.
    2. Or you can also provide a local json data as customCardJSON to display the card.
      <label class="hoverme" > My Name! </label>
      
      //Required JSON format with both local or remote data source:
      var myProfile = {
          "name": "My profie name",
          "image": "url_for_my_profile_image.jpg", 
          "link": "http://www.aboutmelink.com/", 
          "bio": "My bio or short description here",
          "website": "http://mywebsite.com", 
          "email": "me@email.com"
      }
      
      $('.hoverme').hovercard({
          showCustomCard: true, 
          customCardJSON: myProfile
      });
      Check this working example of showCustomCard on jsFiddle.

  • customCardJSON default value { }
    Provide the local json data to display with showCustomCard. See showCustomCard explanation on how to use this.
  • delay default value 0
    Add a delay in hovercard appearance. *Suggested by :)
  • autoAdjust default value true
    Turn off the plugin's auto adjustment feature. *Requested by Ben Vernon
*Wordpress users: Read how to use this plugin on your wordpress blog in 5 easy steps.