Displaying your social media account on your website gives them great exposure to your accounts and allows your readers to easily follow you on the different social networks. There is an awesome jQuery plugin that allows you to create a nice pop-up with your contact information.

Hovercard

Hovercard is 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. - 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.

  Hovercard is a free jQuery plugin which you can download by clicking below. Download Hovercard

Using Hovercard

We are going to look at how easily the hovercard is to use. View the demo to see the different hovercards we are going to create. Hovercard Demo

To define the hover card you need a HTML element to be the anchor of the hovercard, this is where the user will hover over the text to display the hovercard. You will need a paragraph of text to use inside the hovercard and an image to use inside the hovercard.

Plugin Options

Below are all the options you can use to change the settings of the plugin. - width default value 300 - openOnLeft default value false - openOnTop default value false - cardImgSrc default value '' - background default value '#ffffff' - onHoverIn default value function () { } - onHoverOut default value function () { } - showTwitterCard default value false - twitterScreenName default value '' - showFacebookCard default value false - facebookUserName default value ''

Basic Hovercard

This is the most basic form of the hover card all you need to use is 3 parameters on the plugin to create this hovercard.

The HTML

The HTML will be used to create a point where you will hover over to display the hovercard. For this example we use a label with an ID to define the hover point.

<p>
    Hovercard Demo by <label id="demo-basic">Paulund</label>, creates web development tutorials and snippets
    about Wordpress, PHP, jQuery, HTML5 and CSS3.
</p>

The Javascript

var hoverHTMLDemoBasic = '<p>' +
        'Paulund a web developer from Bristol, UK ' +
        'I make websites do things, I dont design sites, I make them be awesome.</p>';

$("#demo-basic").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        width: 400,
        cardImgSrc: 'http://1.gravatar.com/avatar/30f5be9e9d9b2d0206a08407310759be?s=90&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D90&r=G'
    });

Demo

Basic Hovercard Display Left

This is the same as the basic hovercard but it will change the display to be the left.

The HTML

<p>
    Hovercard Demo by <label id="demo-basic-left">Paulund</label>, creates web development tutorials and snippets
    about Wordpress, PHP, jQuery, HTML5 and CSS3.
    </p>

The Javascript

$("#demo-basic-left").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        openOnLeft: true,
        width: 400,
        cardImgSrc: 'http://1.gravatar.com/avatar/30f5be9e9d9b2d0206a08407310759be?s=90&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D90&r=G'
    });

Demo

Basic HoverCcrd Display Top

In this example it moves the html element to be on top of the title.

The HTML

<p>
    Hovercard Demo by <label id="demo-basic-top">Paulund</label>, creates web development tutorials and snippets
    about Wordpress, PHP, jQuery, HTML5 and CSS3.
</p>

The Javascript

$("#demo-basic-top").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        openOnTop: true,
        width: 400,
        cardImgSrc: 'http://1.gravatar.com/avatar/30f5be9e9d9b2d0206a08407310759be?s=90&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D90&r=G'
    });

Demo

Hovercard Change Background

You can change the background of the hovercard to use and colour or an image by using the background property.

The HTML

<p>
    Hovercard Demo by <label id="demo-background">Paulund</label>, creates web development tutorials and snippets
    about Wordpress, PHP, jQuery, HTML5 and CSS3.
</p>

The Javascript

$("#demo-background").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        background: "#ddd",
        width: 400,
        cardImgSrc: 'http://1.gravatar.com/avatar/30f5be9e9d9b2d0206a08407310759be?s=90&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D90&r=G'
    });

Demo

Hovercard Change On Hover In And Out Callback

Using callback function for the hover event and the hover out event.

The HTML

<p>
    Hovercard Demo by <label id="demo-callback">Paulund</label>, creates web development tutorials and snippets
    about Wordpress, PHP, jQuery, HTML5 and CSS3.</p>

<p><span id="mouse-label">Hover over the above</span></p>

The Javascript

$("#demo-callback").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        onHoverIn: mouseoverLabel,
        onHoverOut: mouseHoverOut,
        width: 400,
        cardImgSrc: 'http://1.gravatar.com/avatar/30f5be9e9d9b2d0206a08407310759be?s=90&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D90&r=G'
    });

function mouseoverLabel(){
    $('#mouse-label').text("Mouse is over the hovercard label.");
}

function mouseHoverOut(){
    $('#mouse-label').text("Mouse is out of hovercard label.");
}

Demo

Twitter Card

This will display an overview of your Twitter account.

<p>Hovercard demo to display the Twitter card for <label id="demo-twitter">Paulund</label>.
        Keep up to date with everything going on and get new tutorials and snippets straight to your Twitter stream.</p>
<p><a href="http://twitter.com/paulund" target="_blank">Follow Paulund</a>.</p>

The Javascript

    $("#demo-twitter").hovercard({
        showTwitterCard:true,
        twitterScreenName:"paulund_",
        width: 400,
    });

Demo

Facebook Card

This will display an overview of your Facebook page.

The HTML

    <p>Hovercard demo to display the Facebook card for <label id="demo-facebook">Paulund</label>.
    Keep up to date with everything going on and get new tutorials and snippets straight to your Facebook feed.</p>
    <p><a href="http://www.facebook.com/paulundcouk" target="_blank">Like Paulund</a></p>

The Javascript

    $("#demo-facebook").hovercard({
        showFacebookCard: true,
        facebookUserName: "paulundcouk",
        openOnTop:true,
        width: 400,
    });

Demo

Download Hovercard

Download Hovercard