javascript tooltip (всплывающая подсказка)

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);
	}
}

<h2 onmouseover="tooltip(this,'Это просто пример всплывающей<br /> подсказки JavaScript!')" onmouseout="hide_info(this)">
It is just JavaScript Tooltip example!</h2>

• функция tooltip собственно, вызывает появление подсказки, в качестве параметров принимает элемент, вызвавший tooltip и текст подсказки
• функция hide_info скрывает tooltip
• функция ietruebody нужна для того, чтобы учесть кривизну IE разных версий
• функция positiontip позиционирует tooltip во время движения мыши над целевым объектом
• функция appear обеспечивает плавное появление подсказки

пример

It is just JavaScript Tooltip example!

• Tweet

Комментарии:

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

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

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

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

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

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

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

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

Спасибо огромное, все отлично работает :)

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

А если еще и на jQuery переписать - так вообще будет коротко.

Кстати, можно как-нибудь сделать, чтобы распознавался атрибут rel и по нему совершалось действие?

типа <h1 rel="tooltip"> ... <h1>

Спасибо огромное отлично работает!! Супер...
Много что нашел на вашем сайте))

PS
Кому не ясно... id='mess' надо писать в Div...

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

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

Юзать так!

<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>

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

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

И странно что тут написано в одних местах переменная e в другом event в данном скрипте это одно и то же. Людей в заблуждение вводят

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

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

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

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

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

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

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

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

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

Дмитрий,

На рабочий код!

http://snippy.ru/snippet/47/

Не мучайся с тем отродьем у которого куча недостатков с позиционированием и как ты сказал - Дергается титле ; (

<div Style="visibility: hidden; position: absolute" id="mess"></div>

Все работает. Спасибо.

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

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

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

Интересная статья! кстати если кому интересно есть еще способ на jQuery на http://sitemaker.x10.bz/articles.php?id=12

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

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

от кого: