Twitter,Facebookにも対応！マウスオーバーでかっこ良く情報表示「Hovercard」

スタイリッシュなツールチップとしても、TwitterやFacebookアカウントの情報表示にも使える便利なプラグインが登場。
Hovercardを利用すれば実に簡単に導入できちゃいます。

使用方法

Hovercardからファイルをダウンロード。

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.hovercard.min.js"></script>
<script>
$(function() {
	//ツールチップの場合
      var hoverHTMLDemoBasic = '<p>skaure is me.</p>'; //表示させたい内容
    $("#id1").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        width: 200, //幅
        cardImgSrc: '画像.jpg' //表示させたい画像
    });

	//Twitterアカウントの場合
    $("#id2").hovercard({
        showTwitterCard: true,
        width: 350 //幅
    });
    
    //Facebookアカウントの場合
    $("#id3").hovercard({
           showFacebookCard: true,
           facebookUserName: 'skuare.net', //ユーザーor Facebookページ
           width: 350 //幅
    });    
});
</script>
あとは対応するidを記述すれば完成です。 

<p id="id1">skuare</p>
<p id="id2" data-hovercard="twitterアカウント">skuare @twitter</p>
<p id="id3">skuare.net on Facebook</p>

サンプル

I'm

I'm

I'm


Javascriptサンプルページ一覧
skuare.net