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!

Применять можно абсолютно ко всем элементам. Заметьте также, что ничего не мешает нам использовать html теги в тексте подсказки.

41 thoughts on “Javascript tooltip (всплывающая подсказка)

  1. Класс! Только мне что-то не удаётся вставить себе на страницу. Можно чуть подоходчивее? Для умов средних? 🙂

  2. классная подсказочка, НО! как вставить ссылку в подсказку? у меня не получается.. портится вызов функции..

  3. 2 iCanary
    Вставить-то ссылку можно (используй в ссылке вместо двойных кавычек одинарные) только какой от нее толк? Все равно мышкой не торкнешь ее! 🙂
    Авторам статьи два балла за раскрытие статьи (можно было бы и по подробней написать).

  4. Автору статьи спасибо. И вообще ресурс очень хороший. Код понятный, поэтому самому разобрать принцип работы достаточно просто.

  5. Всем салют. Я вот в создании сайтов на жвижке LDE новичёч, и вот какая у меня проблема. Я не знаю куда надо вписать этот скрипт? Я пользуюсь Dreamweaver CS3 т что-то получается, а вот куда скрепты устанавливать я ни как не могу понять(
    Если не трудно, то могли бы вы мне подробно рассказать что куда пихать?

  6. А зачем ты вообще полез создавать сайты не зная даже самый простых вещей?

  7. ИМХО, надо смотреть код этой страницы, если не знаете, как разместить что-то

  8. Хм. Скопировала .js, созала div как описывалось. Посказка появляется но не позицинируется относительно курсор мышки( Причем сама функция positiontip задействуется, но что-то ничего не меняет =(

  9. Спасибо огромное, все отлично работает 🙂

  10. Непонятно, как использовать данный скрипт… Где и как выглядит элемент с id='mess'? У меня скрипт не работает, IE выдаёт ошибку, в остальных браузерах ничего не происходит. Попытался разобраться как сделана эта подсказка на данной страничке, но и тут ничего не понял. Даже ту же самую функцию tooltip и загадочный элемент с id='mess' не смог найти. Можно ли дать скрипт данной подсказки просто в коде html без всяких подключений скриптов, чтобы можно было скопировать в браузере и вставить в файл с расширением html?

  11. А если еще и на jQuery переписать — так вообще будет коротко. Кстати, можно как-нибудь сделать, чтобы распознавался атрибут rel и по нему совершалось действие? типа <h1 rel="tooltip"> … <h1>

  12. Спасибо огромное отлично работает!! Супер… Много что нашел на вашем сайте)) PS Кому не ясно… id='mess' надо писать в Div…

  13. Спасибо за пример. Использовал на своем сайте. Правда в IE отображается не совсем так как надо, при позиционировании подсказки ее ширина уменьшается при достижении края элемента.

  14. Привет! Не работает перемещение подсказки. Подскажите в чем может быть причина?

  15. Юзать так! <html> <head> <script type="text/javascript" src="nicetitle.js"></script> <style type="text/css"> .block1 { width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left; } .block2 { width: 200px; background: #fc0; padding: 5px; border: solid 1px black; float: left; position: relative; top: 40px; left: -70px; } </style> </head> <body> <h2 onmouseover="tooltip(this,'Hello!')" onmouseout="hide_info(this)"> It is just JavaScript Tooltip example!</h2> <div class="block2" id="mess"></div> </body> </html>

  16. скрипт который опубликован, неработоспособен в сафари и хроме между прочим. Подсказка-пример позиционируется не такой функцией :-)))))))

  17. Перед применением каких то встроенных в хтмл объекты методов советую проверять их не таким образом: ( document.getElementById && !document.all ) или ( document.all && !window.opera ) или еще каким то образом, а проверять есть ли такой метод который вам нужен. Напрмер вот так: var cursorX = e.pageX ? e.pageX : e.clientX + ietruebody().scrollLeft; И странно что тут написано в одних местах переменная e в другом event в данном скрипте это одно и то же. Людей в заблуждение вводят

  18. to Наблюдатель: а какой функцией по вашему подсказка-пример позиционируется? Хоть бы в исходный код потрудились заглянуть прежде чем писать. Следующий пост комментировать не осмелюсь, поскольку словосочетание "встроенные в хтмл объекты методы" никакого отношения к объективной реальности явно не имеет. Посоветуйте еще что-нибудь для моей коллекции бреда …

  19. Народ у меня проблема с этим скриптом: Если mess находится рядом(в коде) с вызывающим объктом, то все работает(но другие объекты перекрывают его), а если внизу перед </body>, то замещает собой вызывающий объект. подскажите, что делать?

  20. Все окей, разабрался! Спасибо за скрипт!

  21. Работает очень хорошо спасибо автору за скрипт

  22. Люди! Все Ваши комментарии посмотрел почитал: попробую объяснить тому кто произнёс фразу "ЕЁ ВСЁ РАВНО НЕ ТОРКНЕШЬ" не двигай вслед за курсором и "торкнешь"…. А вообще-то советую!!! почитать здесь же div'ное окно и станет!!! ясно и понятно. Спасибо автору.

  23. Работает отлично! Хочется узнать как можно сделать на сайте чтобы эти всплывающие подсказки указывали что надо делать на сайте!?? т.е. НАПРИМЕР человек попал на сайт, и всплывающая подсказка указала на поле для "регистрациии", когда человек перешел на страницу регистрации такаяже подсказка указала что делать дальше!

  24. Все прикрасно работает!Если кто-то не соображает в html-програмировании,и руки не из того места откуда надо,то нечего заниматься созданием сайтов.Сначала учите язык!

  25. При наведении на сам текст, вместо подсказки появляется новое окно с белым фоном, объясните, в чём проблема?! х)

  26. Но почему! когда помещаешь в подсказку кроме текста — html теги, происходит подергивание блока с подсказкой?

  27. Дмитрий, На рабочий код! http://snippy.ru/snippet/47/ Не мучайся с тем отродьем у которого куча недостатков с позиционированием и как ты сказал — Дергается титле ; (

  28. Спасибо за простой, понятный, работающий скрипт.

  29. Все отлично работает! Спасибо! Не разжевано, но хорошо!

  30. Спасибо за отличную статью. Все понятно и работает. Долго мучился, только здесь наконец-то нашел нормальный понятный пример, который удалось реализовать.

  31. Работает почти хорошо. При изменении разрешения экрана меняется позиция подсказки. Скажи как сделать так, чтобы всегда одинаково подсказка выскакивала, прямо под курсором?

  32. Спасибо огромное за скрипт. Все просто и понятно.

  33. А если заменить получение текста из аттрибута, например data-title — то будет вообще универсальное решение, т.к. его скриптами менять проще, все что надо поменять — function tooltip(el) { tipobj=d.getElementById('mess'); tipobj.innerHTML = el.getAttribute('data-title'); …} Успехов

  34. Это просто гениально сделано, выделяешь код вместе с нумерацией строк…

  35. Друзья! Хотите знать, как сделать то же самое, но только вместо 40 строчек кода, одно слово кода? Делается так — прямо в html вставляете: <p title="Это подсказка, которая всплывает при наведении мышки">Это ваш текст на странице сайта</p> Готово! 8) Пользуйтесь на здоровье! Можете не благодарить! ))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *