カーソルを乗せたときにちょっとした解説や用語説明などを表示するツールチップ機能です。

HTML

<span data-tooltip="ツールチップ用のテキストです">ここにマウスを置いてください</span>

data-tooltipの中にツールチップとして表示したい文章を入れます。

CSS

[data-tooltip]{
	border-bottom: 1px dashed #aaa;
	cursor: help;
}
.tooltip{
    display: none;
    position: absolute;
    padding: 6px 8px 4px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1;
    opacity: 0;
}
.tooltip::before{
	content: "";
	position: absolute;
	bottom: -10px;
	left: 10px;
	border: 5px solid transparent;
	border-top: 5px solid #333;
}

jQuery

$(document).ready(function() {
    var $tooltip = $("<div class='tooltip'></div>").appendTo("body");
    $("[data-tooltip]").on({
        mouseenter: function() {
            var position = $(this).offset();
            $tooltip.stop(true, true)
                .text($(this).data("tooltip"))
                .css({
                    display: 'block',
                    opacity: 0,
                    top: position.top - $tooltip.height() - 15,
                    left: position.left
                })
                .animate({opacity: 1}, 200);
        },
        mouseleave: function() {
            $tooltip.stop(true, true)
                .animate({opacity: 0}, 200, function() {
                    $tooltip.css({display: 'none'});
                });
        }
    });
});

実際の動作

See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.