<!DOCTYPE HTML>
<html>
<body>
<style>
tooltipShadow {
background: black;
}
.tooltipContent {
left: -4px; top: -4px; /*смещение относительно тени*/
background-color: #ff0; /* желтый фон */
border: solid black 1px; /* тонкая рамка черного цвета*/
padding: 5px; //
font: bold 10pt sans-serif;
}
</style>
<script>
function Tooltip() {//Ф-ция констркутор класса Tooltip
this.tooltip = document.createElement("div");
this.tooltip.style.position = "absolute";
this.tooltip.style.visibility = "hidden";
this.tooltip.className = "tooltipShadow";
this.content = document.createElement("div");
this.content.style.position = "relative";
this.content.className = "tooltipContent";
this.tooltip.appendChild(this.content);
}
//Определить содержимое, устнановить позицию окна с подсказкой и отобразить ее
Tooltip.prototype.show = function(text, x, y){
this.content.innerHTML = text; //Записать текст подсказки
this.tooltip.style.left = x + "px"; //Определить положение
this.tooltip.style.top = y + "px";
this.tooltip.style.visibility = "visible"; //сделать видимой
//Добавить подсказку в документ, если это еще не сделано
if(this.tooltip.parentNode != document.body)
document.body.appendChild(this.tooltip);
};
//Скрыть подсказку
Tooltip.prototype.hide = function() {
this.tooltip.style.visibility = "hidden"; //сделаьб невидимой
};
//По сути вызываю метод
window.onload = function(){
var tip = new Tooltip();
document.onmousedown = function(){
tip.show("Большая жирная жопа", 24, 43);
};
document.onmouseup = function(){tip.hide()};
}
</script>
</body>
</html>