Чето не спится ... решил пример с Флэнагана попробывать но че то нем могу запустить его на странице
Не ругать)
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 c = new Tooltip();
document.body.onmousedown = c.show("Большая жирная жопа", 24, 43);
document.body.onmouseup = c.hide();
}
<html>
<head>
<script type="text/javascript" src="tooltip.js"></script>
<link rel="stylesheet" type="text/css" href="tooltip.css">
<title>Всплывающие подсказки</title>
</head>
<body>
Привет меня зовут Владик
</body>
</html>
|
Код:
|
CSS
.tooltipShadow {
background: url(shadow.png); /* полупрозрачная тень */
}
.tooltipContent {
left: -4px; top: -4px; /*смещение относительно тени*/
background-color: #ff0; /* желтый фон */
border: solid black 1px; /* тонкая рамка черного цвета*/
padding: 5px; //
font: bold 10pt sans-serif;
} |