ToolTip (с Prototype.js)

Чего выкладываю: всё, что мной написано на JavaScript это большое достяжение. Ну, вы знаете, когда начинаешь на чём-то писать любая мелочь превращается в необразимые достижения.

ToolTip это подсказка. Когда в браузере наводите мышку на элемент с атрибутом title вылезает тултип (alt не стал заменять, ибо Это Иное). Скрипт заменяет стандартный тултип на этот, который можно всячески разукрашивать средствами CSS. Плюс он так клёвааа ездит за мышкой, когда на элементе водишь.

JavaScript:
[js]window.onload = function(){
var titles = $A(document.all || document.getElementsByTagName('*'));

titles.find(function(node){
if (node.tagName == 'A' && node.target == '_blank')
node.title += (node.title ? ' ' : '') + '(откроется в новом окне)';

if (node.title){
var div = document.createElement('DIV');

document.body.appendChild(div);
div.setAttribute('id', 'tooltip');
div.innerHTML = node.title.gsub('{nl}', '<br />');
node.removeAttribute('title');

Event.observe(node, 'mousemove', function(event){
div.style.display = 'inline';
div.style.left = (event.clientX + 15),
div.style.top = (event.clientY + 15)
});

Event.observe(node, 'mouseout', function(event){
div.style.display = 'none';
});
}
});
}[/js]

Надо бы прифигачить setTimeout() к событию mousemove, но я не знаю как это сделать для группы настроек стиля.

div.style, а не Прототипный div.setStyle использовал потому что у IE с ним проблемы какие-то. У IE ещё проблем с методом update, поэтому просто innerHTML.

CSS:
[css]#tooltip {
background: #fff;
border: 1px solid #000;
color: #000;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
margin: 0px;
padding: 2px;
position: absolute;
display: none;
width: auto;
}[/css]
Не меняйте атрибуты position, display и width. Они должны быть стандартными.

 

35 Кб ради возможности всунуть картинку в тултип (насущная проблема, ага). Это треть веса всего prototype.js, который хранит в себе массу полезного.

 

Вот ещё ссылку дали мало весит и прототип не нужен.

antonn, не, это слишком специфическая штука. Суть заменить стандартный тултип без вмешательств, а с твоим тултипом нужно определять отдельные элементы и задавать действия там, где title должен быть. Эдакая система посказок.

 

А так можно в title указать обьект и он станет тултипом, как у Антона http://antonn.com/xlam/_hint.html
[js]window.onload = function(){
var titles = $A(document.all || document.getElementsByTagName('*'));

titles.find(function(node){
if (node.tagName == 'A' && node.target == '_blank')
node.title += (node.title ? ' ' : '') + '(откроется в новом окне)';

if (node.title){
var div = Try.these(function(){
return eval(node.title.sub('(откроется в новом окне)', ''));
});

if (!div){
div = document.createElement('DIV');
div.innerHTML = node.title.gsub('{nl}', '<br />');
}

div.setAttribute('id', 'tooltip');
document.body.appendChild(div);
node.removeAttribute('title');

Event.observe(node, 'mousemove', function(event){
div.style.display = 'inline';
div.style.left = (event.clientX + 15),
div.style.top = (event.clientY + 15)
});

Event.observe(node, 'mouseout', function(event){
div.style.display = 'none';
});
}
});
}[/js]

Типа

Код (Text):

1. <a fref="ссылко" title="$('tooltop')">покажи тултип</a>
2. <img src="картинко" id="tooltop" />

или

Код (Text):

1. <a fref="ссылко" title="$('tooltop')">покажи тултип</a>
2. <table id="tooltop">здоровая таблица</table>