jQueryとCSSで自分でTooltip(ツールチップ)を作る

tooltipのチュートリアルが多くありますが意外とデコレーションが多く最小コードのものが少ない気がします。
tooltipを使おう＝bootstrap使う。みたいに妥協している気がします。意外と作ると簡単です。
CSSがめんどくさいとか思うかもしれませんが作ってみると楽ちんです。

CSS3

CSSは下記のコードです。ポイントはpositionの使い方をしっかりと覚えておくことです。親がrelative, 子がabsoluteとしてtop, right, bottom, leftを使って表示位置を指定します。

.tooltip {
    position: relative;
    cursor: pointer;
}
.tooltip .tooltip-content 
{   
    display: none;
    position: absolute;
    z-index: 1000;
    width: 180px;
    text-shadow: none;
    padding: 10px;
    
    text-align: left;
    
    background-color: rgba(50,50,50,0.8);
    color: #fff;
    
    font-size: 80%;
    
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    
    top: 0px;
    left: -220px;

}
.tooltip .tooltip-content.right
{
    width: 270px;
    left: 90px;
    top: 0px;       
}

jQuery Code

jQueryコードは下記のとおりです。mouseoverした時にunbindしてあげてください。mouseoverごとにイベントが生成されると大変です。また、オプションとしてsizeなども指定できるようになっています。

var tooltip = function(){
    
    $('.tooltip').unbind('mouseover').unbind('mouseout');
    $('.tooltip').
        mouseover(function(){
            data_content = $(this).attr('data-content');
            size         = $(this).attr('size') || 200;
            
            $(this).append('<div class="tooltip-content right">'+data_content+'</div>');
            $('.tooltip-content').css('width', size).fadeIn(100);
        }).
        mouseout(function(){
            $(this).find('.tooltip-content').remove();
        });
    
};
$(document).ready(function(){
    tooltip();
});

htmlからの使い方は簡単

<a href="#" class="tooltip" size="200" data-content="ツールチップで表示されます">ここをマウスオーバー</a> するとtooltipが表示されます。