jQueryを使用してツールチップを表示する

tooltip.html

<style type="text/css">
    .tooltip {
        display: none;
    }
    #tooltip-showing {
        display: none;
        padding: 15px;
        width: 200px;
        text-align: left;
        overflow: hidden;
        position: absolute;
        z-index: 9999;
        border: solid 1px;
    }
</style>

<a href="https://www.google.com/">Google
    <span class="tooltip"><p>A link to Google.com</p></span>
</a>

tooltip.js

$(function() {
    setTooltipEvent();
});

/**
 * ツールチップのイベントをセットする
 */
setTooltipEvent = function() {
    /**
     * ツールチップを表示する
     * @param {object} event handler
     */
     $('a:has(.tooltip)').mouseover(function(event) {
        $('body').append(
            '<div id="tooltip-showing">'
            + $(this).children('.tooltip').html()
            + '</div>'
        );
        $('#tooltip-showing').css({
            top: (event.pageY + 10) + 'px',
            left: (event.pageX + 10) + 'px',
            background: '#87CEEB',
        }).fadeIn('fast');
    }).mousemove(function(event) {
        $('#tooltip-showing').css({
            top: (event.pageY + 10) + 'px',
            left: (event.pageX + 10) + 'px',
        });
    }).mouseout(function(event) {
        $('#tooltip-showing').remove();
    });
}