VPF::Показать стандартный tooltip - Форум программистов

Limonadni Joe

Дата 5.9.2006, 21:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 311
Регистрация: 1.11.2002
Где: Москва

Репутация: нет
Всего: 2

Как по какому-нибудь событию показать tooltip (тот, который параметром title задаётся) некоторого элемента.

12345c

Дата 5.9.2006, 22:26 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Никак, скорее всего. Но можно достать этот атрибут и показать в слое вместо подсказки. Будет лучше и управляемее.

Limonadni Joe

Дата 6.9.2006, 11:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 311
Регистрация: 1.11.2002
Где: Москва

Репутация: нет
Всего: 2

Буду очень признателен за пример smile

dstorm81

Дата 6.9.2006, 12:06 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tooltip</title>

<style type="text/css">
/*<![CDATA[*/
#shower{position:absolute;width:200px;height:100px;border-color:black;border-style:solid;border-width:1px;background-color:#eee;top:0px;left:0px;z-index:10;display:none}
/*]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function detectTooltip(e)
{
e=e||window.event;
i=e.target||window.event.srcElement;
if(i.getAttribute('rel'))
 {
 toolObj=document.getElementById('shower');
 toolObj.style.left=e.clientX+20+'px';
 toolObj.style.top=e.clientY+document.documentElement.scrollTop+10+'px';
 toolObj.innerHTML=i.getAttribute('rel');
 toolObj.style.display='block';
 } 
else{document.getElementById('shower').style.display='none';}
//document.title=document.documentElement.scrollTop

}

document.onmousemove=detectTooltip



//]]>
</script>
</head>
<body>
<div id="shower"></div>
<a href="#" rel="тут всякая информация 1">links</a><br />
<a href="#" rel="тут всякая информация 2">links</a><br />

<a href="#" rel="тут всякая информация 3">links</a><br />
<a href="#" rel="тут всякая информация 4">links</a><br />
<a href="#" rel="тут всякая информация 5">links</a><br />
<a href="#" rel="тут всякая информация 6">links</a><br />
<a href="#" rel="тут всякая информация 7">links</a><br />
<a href="#" rel="тут всякая информация 8">links</a><br />
<a href="#" rel="тут всякая информация 9">links</a><br />
<a href="#" rel="тут всякая информация 10">links</a><br />
<a href="#" rel="тут всякая информация 11">links</a><br />

<a href="#" rel="тут всякая информация 12">links</a><br />
<a href="#" rel="тут всякая информация 13">links</a><br />
<a href="#" rel="тут всякая информация 14">links</a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<a href="#" rel="тут всякая информация 1">links</a><br />
<a href="#" rel="тут всякая информация 2">links</a><br />
<a href="#" rel="тут всякая информация 3">links</a><br />
<a href="#" rel="тут всякая информация 4">links</a><br />
<a href="#" rel="тут всякая информация 5">links</a><br />
<a href="#" rel="тут всякая информация 6">links</a><br />

<a href="#" rel="тут всякая информация 7">links</a><br />
<a href="#" rel="тут всякая информация 8">links</a><br />
<a href="#" rel="тут всякая информация 9">links</a><br />
<a href="#" rel="тут всякая информация 10">links</a><br />
<a href="#" rel="тут всякая информация 11">links</a><br />
<a href="#" rel="тут всякая информация 12">links</a><br />
<a href="#" rel="тут всякая информация 13">links</a><br />
<a href="#" rel="тут всякая информация 14">links</a><br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

Добавлено @ 12:09
change i.getAttribute('rel') на i.getAttribute('title')
и добавь в элементах title само собой

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

Limonadni Joe

Дата 6.9.2006, 15:37 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 311
Регистрация: 1.11.2002
Где: Москва

Репутация: нет
Всего: 2

dstorm81, Всё работает, вот только, если я сую скрипт в отдельный файл scrollTop всегда равен 0, видимо из-за того, что переменная document косячит. Как бы это исправить?

dstorm81

Дата 6.9.2006, 15:49 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

а вот и нифига подобного, смотри на доктипе!
qq.html

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tooltip</title>
<script type="text/javascript" src="qq.js">
</script>
<style type="text/css">
/*<![CDATA[*/
#shower{position:absolute;width:200px;height:100px;border-color:black;border-style:solid;border-width:1px;background-color:#eee;top:0px;left:0px;z-index:10;display:none}
/*]]>*/
</style>

</head>
<body>
<div id="shower"></div>
<a href="#" rel="тут всякая информация 1">links</a><br />
<a href="#" rel="тут всякая информация 2">links</a><br />
<a href="#" rel="тут всякая информация 3">links</a><br />
<a href="#" rel="тут всякая информация 4">links</a><br />
<a href="#" rel="тут всякая информация 5">links</a><br />
<a href="#" rel="тут всякая информация 6">links</a><br />
<a href="#" rel="тут всякая информация 7">links</a><br />
<a href="#" rel="тут всякая информация 8">links</a><br />
<a href="#" rel="тут всякая информация 9">links</a><br />
<a href="#" rel="тут всякая информация 10">links</a><br />
<a href="#" rel="тут всякая информация 11">links</a><br />
<a href="#" rel="тут всякая информация 12">links</a><br />
<a href="#" rel="тут всякая информация 13">links</a><br />
<a href="#" rel="тут всякая информация 14">links</a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#" rel="тут всякая информация 1">links</a><br />
<a href="#" rel="тут всякая информация 2">links</a><br />
<a href="#" rel="тут всякая информация 3">links</a><br />
<a href="#" rel="тут всякая информация 4">links</a><br />
<a href="#" rel="тут всякая информация 5">links</a><br />
<a href="#" rel="тут всякая информация 6">links</a><br />
<a href="#" rel="тут всякая информация 7">links</a><br />
<a href="#" rel="тут всякая информация 8">links</a><br />
<a href="#" rel="тут всякая информация 9">links</a><br />
<a href="#" rel="тут всякая информация 10">links</a><br />
<a href="#" rel="тут всякая информация 11">links</a><br />
<a href="#" rel="тут всякая информация 12">links</a><br />
<a href="#" rel="тут всякая информация 13">links</a><br />
<a href="#" rel="тут всякая информация 14">links</a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

qq.js

Код



function detectTooltip(e)
{
e=e||window.event;
i=e.target||window.event.srcElement;
if(i.getAttribute('rel'))
 {
 toolObj=document.getElementById('shower');
 toolObj.style.left=e.clientX+20+'px';
 toolObj.style.top=e.clientY+document.documentElement.scrollTop+10+'px';
 toolObj.innerHTML=i.getAttribute('rel');
 toolObj.style.display='block';
 } 
else{document.getElementById('shower').style.display='none';}
//document.title=document.documentElement.scrollTop
}
document.onmousemove=detectTooltip

вот это все работает в осле лисе и опере

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

Limonadni Joe

Дата 6.9.2006, 17:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 311
Регистрация: 1.11.2002
Где: Москва

Репутация: нет
Всего: 2

dstorm81, Да, с доктипе заработало. А можно вопрос слегка не в тему? У меня раньше шрифт размером 10pt (масштабируемый)прописывался как 0.8em, а теперь с этим доктипе он отображается довольно маленьким. Как бы сделать его ровно 10pt, а то сколько я не экспериментирую (0.92, 0.93em...) всё не то выходит.

dstorm81

Дата 7.9.2006, 12:08 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

если охота шрифт который был то без доктайпа

toolObj.style.top=e.clientY+document.body.scrollTop+10; а не
toolObj.style.top=e.clientY+document.documentElement.scrollTop+10+'px';

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

eee

Дата 15.8.2008, 18:14 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 66
Регистрация: 14.4.2008
Где: ХарьковCity

Репутация: нет
Всего: 1

вот и мне помогли ваши посты, но есть другой вопрос. А как заблокировать показ стандартных описаний линков?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »