Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Показать стандартный tooltip

Автор: Limonadni Joe 5.9.2006, 21:54

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

Автор: 12345c 5.9.2006, 22:26

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

Автор: Limonadni Joe 6.9.2006, 11:40

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

Автор: dstorm81 6.9.2006, 12:06

Код <!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 само собой

Автор: Limonadni Joe 6.9.2006, 15:37

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

Автор: dstorm81 6.9.2006, 15:49

а вот и нифига подобного, смотри на доктипе! 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 вот это все работает в осле лисе и опере

Автор: Limonadni Joe 6.9.2006, 17:15

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

Автор: dstorm81 7.9.2006, 12:08

если охота шрифт который был то без доктайпа toolObj.style.top=e.clientY+document.body.scrollTop+10; а не toolObj.style.top=e.clientY+document.documentElement.scrollTop+10+'px';

Автор: eee 15.8.2008, 18:14

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)