Апрель 2008, 02 @ 03:11
CuteNews
Prototype.js + прямые Алёшкины ручёнки.
window.onload = function(){
var titles = $A(document.all || document.getElementsByTagName('*'));
titles.find(function(node){
if (node.tagName == 'IMG' && node.alt && !node.title)
node.title = node.alt;
if (node.tagName == 'A' && node.target == '_blank')
node.title += (node.title ? ' ' : '') + '(откроется в новом окне)';
if (node.title){
var div = Try.these(function(){
return eval(node.title);
});
if (!div){
var 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){
if (!event.pageX && !event.pageY){
var body = document.body;
event.pageX = (event.clientX + body.scrollLeft + node.scrollLeft);
event.pageY = (event.clientY + body.scrollTop + node.scrollTop);
}
div.style.display = 'inline';
div.style.left = (event.pageX + 15);
div.style.top = (event.pageY + 15);
});
Event.observe(node, 'mouseout', function(event){
div.style.display = 'none';
});
}
});
}
До этого пользовал этот тултип. Эх, жаль Prototype.js такой здоровый по размерам.
Штука заменяет стандартные подсказки браузера на персонального вида.
Сам вид редактируется средстами 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;
}
upd: Правильные координаты мыши беруться из event.pageX и event.pageY. В IE их нет.
Если указать в title обьект, то этот обьект станет тултипом. Например, $('тут id таблицы') и таблица будет тултипом. Или картинка. Или ещё чего. Сделано для облегчения создания подсказок.
Атрибут alt у картинки будет продублирован атрибутом title для создания тултипа этой картинки, но удалён не будет. На мой взгляд, alt это немного иное по смыслу нежели title.
