Понедельник, 20.11.2017, 08:53
Приветствую Вас Гость | Регистрация | Вход

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

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

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

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

Обмен электронных денег. Обменять WMZ, WMR, WME, WMU, WMB.
Оплачиваемая рекла
Наш опрос
Какая пора года вам нравится больше?
Всего ответов: 574
Календарь
«  Ноябрь 2017  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
27282930
Статистика

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

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

JavaScript Tooltip (всплывающая подсказка) | EasyWebScripts.net
logo


home map contact


Если вы видите это сообщение - значит вы используете браузер Internet Explorer. Негативное отношение к этому браузеру сложилось не только у владельца данного ресурса, но и у подавляющего большинства людей, разбирающихся в web технологиях. Попробуйте установить один из браузеров по ссылке ниже, возможно вам он тоже понравится больше!

Opera, the fastest and most secure web browser     Spread Firefox Affiliate Button

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!