Alexprom,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
button {
position: relative;
margin: 20px;
}
button .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
(function($) {
$.fn.tool = function(options) {
var defaults = {
xOffset: 10,
yOffset: 25,
tooltipId: "tool",
clickRemove: false,
content: "",
useElement: ""
};
var options = $.extend(defaults, options);
var content;
this.each(function(i) {
var title = $(this).attr("title");
$(this).hover(function(e) { console.log("hover")
content = (options.content != "") ? options.content : title;
content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
$(this).attr("title", "");
if (content != "" && content != undefined) {
$("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
$("#" + options.tooltipId)
.css("position", "absolute")
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
.css("display", "none")
.fadeIn("fast")
}
},
function() {
$("#" + options.tooltipId).remove();
$(this).attr("title", title);
});
$(this).mousemove(function(e) {
$("#" + options.tooltipId)
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
});
if (options.clickRemove) {
$(this).mousedown(function(e) {
$("#" + options.tooltipId).remove();
$(this).attr("title", title);
});
}
});
};
})(jQuery);
jQuery(document).ready(function($) {
$(".title").tool();
})
</script>
</head>
<body>
<button disabled="disabled" ><div class="overlay title" title="disabled"></div>001</button>
<button title="work" class="title">002</button>
</body>
</html>