Среда, 18.10.2017, 08:40
Приветствую Вас Гость | Регистрация | Вход

Позитивное Пространство

Меню сайта
Login form
Обмен денег

С этого сайта скидка на обмен 15%!

Активируйте код дисконтной карточки
NA111

Обмен электронных денег. Обменять WMZ, WMR, WME, WMU, WMB.
Оплачиваемая рекла
Наш опрос
Какая пора года вам нравится больше?
Всего ответов: 573
Календарь
«  Октябрь 2017  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Архив записей

Всплывающая подсказка

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!