Если вы видите это сообщение - значит вы используете браузер Internet Explorer.
Негативное отношение к этому браузеру сложилось не только у владельца данного ресурса, но и у подавляющего большинства людей,
разбирающихся в web технологиях. Попробуйте установить один из браузеров по ссылке ниже, возможно вам он тоже понравится больше!
javascript tooltip (всплывающая подсказка)
Всплывающая подсказка - довольно важный элемент оформления современного web сайта.
А если ее еще красиво оформить и не злоупотреблять применением...
Перейду сразу к делу:
var d = document;
var offsetfromcursorY=15 // y offset of tooltip
var ie=d.all && !window.opera;
var ns6=d.getElementById && !d.all;
var tipobj,op;
function tooltip(el,txt) {
tipobj=d.getElementById('mess');
tipobj.innerHTML = txt;
op = 0.1;
tipobj.style.opacity = op;
tipobj.style.visibility="visible";
el.onmousemove=positiontip;
appear();
}
function hide_info(el) {
d.getElementById('mess').style.visibility='hidden';
el.onmousemove='';
}
function ietruebody(){
return (d.compatMode && d.compatMode!="BackCompat")? d.documentElement : d.body
}
function positiontip(e) {
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
var winwidth=ie? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie? ietruebody().clientHeight : window.innerHeight-20
var rightedge=ie? winwidth-event.clientX : winwidth-e.clientX;
var bottomedge=ie? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY;
if (rightedge < tipobj.offsetWidth) tipobj.style.left=curX-tipobj.offsetWidth+"px";
else tipobj.style.left=curX+"px";
if (bottomedge < tipobj.offsetHeight) tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
else tipobj.style.top=curY+offsetfromcursorY+"px";
}
function appear() {
if(op < 1) {
op += 0.1;
tipobj.style.opacity = op;
tipobj.style.filter = 'alpha(opacity='+op*100+')';
t = setTimeout('appear()', 30);
}
}
В теле страницы должен присутствовать div с visibility="hidden" и position="absolute". Конечно, его можно создавать динамически,
но это я оставляю на ваше усмотрение, как, собственно, и его оформление. Использовать tooltip нужно так:
<h2 onmouseover="tooltip(this,'Это просто пример всплывающей<br /> подсказки JavaScript!')" onmouseout="hide_info(this)">
It is just JavaScript Tooltip example!</h2>
Разберем немного javascript код:
- функция tooltip собственно, вызывает появление подсказки, в качестве параметров принимает элемент,
вызвавший tooltip и текст подсказки
- функция hide_info скрывает tooltip
- функция ietruebody нужна для того, чтобы учесть кривизну IE разных версий
- функция positiontip позиционирует tooltip во время движения мыши над целевым объектом
- функция appear обеспечивает плавное появление подсказки
пример
наведите мышь на текст ниже
It is just JavaScript Tooltip example!
|