tooltip

by AJIEKCEU

HTML

<a href="#" data-tooltip="Подсказка">Ссылка</a>
        
        <div id="tooltip"></div>

CSS

#tooltip {
    z-index: 9999;
	position: absolute;
	display: none;
	top:0px;
	left:0px;
	background-color: #000;
	padding: 5px 10px 5px 10px;
	color: white;
	opacity: 0.6;
	border-radius: 5px; 
}

JavaScript

$("[data-tooltip]").mousemove(function (eventObject) {

        $data_tooltip = $(this).attr("data-tooltip");
        
        $("#tooltip").text($data_tooltip)
                     .css({ 
                         "top" : eventObject.pageY + 5,
                        "left" : eventObject.pageX + 5
                     })
                     .show();

    }).mouseout(function () {

        $("#tooltip").hide()
                     .text("")
                     .css({
                         "top" : 0,
                        "left" : 0
                     });
    });