Позитивное Пространство - Всплывающая подсказка
Суббота, 03.12.2016, 05:27
Приветствую Вас Гость | Регистрация | Вход

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

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

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

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

Обмен электронных денег. Обменять WMZ, WMR, WME, WMU, WMB.
Оплачиваемая рекла
Наш опрос
Какая пора года вам нравится больше?
Всего ответов: 569
Календарь
«  Декабрь 2016  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031
Статистика

Онлайн всего: 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!