Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

tooltip window

Обсуждение темы tooltip window в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здравствуйте! Задача: всплывающее окно подсказок при наведении курсора на элемент (в моем случае это anchor, но может быть и div и img). Для ...


Закрытая тема
 
Опции темы
Старый 11.07.2011, 13:56   #1
Здравствуйте!
Задача: всплывающее окно подсказок при наведении курсора на элемент (в моем случае это anchor, но может быть и div и img). Для anchor есть свойство title, но оно не подходит по двум причинам:
1. таймаут (пропадает через время)
2. не поддерживает форматированный текст

Моя реализация:
Для anchor в onmouseover создаем div-подсказку, в onmouseout - удаляем.
Вроде все красиво, только подсказка видна пока курсор над anchor'ом - если курсор сместить на тот же div(как в стандартных tooltip'ах), то подсказка исчезнет. Про анимацию (всплывание и сворачивание подсказки) я вообще молчу.

Схем реализации в интернет много - но все они громмоздкие. Если все так сложно с подсказками - то я оставлю свою, если Вы знаете как просто (в разумных пределах) реализовать подсказку - буду весьма признателен Вам.
Заранее благодарен.
Алексей.
Днепр
 
Старый 11.07.2011, 13:56
Ссылки
Старый 11.07.2011, 14:24   #2
я пользуюсь этим решением:
Код:
var tooltip=function(){
	var id = 'tt';
	var top = 50;
	var left = 50;
	var maxw = 500;
	var speed = 10;
	var timer = 20;
	var endalpha = 95;
	var alpha = 0;
	var tt,t,c,b,h;
	var ie = document.all ? true : false;
	return{
		show:function(v,w){
			if(tt == null){
				tt = document.createElement('div');
				tt.setAttribute('id',id);
				t = document.createElement('div');
				t.setAttribute('id',id + 'top');
				c = document.createElement('div');
				c.setAttribute('id',id + 'cont');
				b = document.createElement('div');
				b.setAttribute('id',id + 'bot');
				tt.appendChild(t);
				tt.appendChild(c);
				tt.appendChild(b);
				document.body.appendChild(tt);
				tt.style.opacity = 0;
				tt.style.filter = 'alpha(opacity=0)';
				document.onmousemove = this.pos;
			}
			tt.style.display = 'block';
			c.innerHTML = v;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
			h = parseInt(tt.offsetHeight) + top;
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(1)},timer);
		},
		pos:function(e){
			var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
			var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
			tt.style.top = (u ) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		fade:function(d){
			var a = alpha;
			if((a != endalpha && d == 1) || (a != 0 && d == -1)){
				var i = speed;
				if(endalpha - a < speed && d == 1){
					i = endalpha - a;
				}else if(alpha < speed && d == -1){
					i = a;
				}
				alpha = a + (i * d);
				tt.style.opacity = alpha * .01;
				tt.style.filter = 'alpha(opacity=' + alpha + ')';
			}else{
				clearInterval(tt.timer);
				if(d == -1){tt.style.display = 'none'}
			}
		},
		hide:function(){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
		}
	};
}();
CSS-классы:
Код:
#tt {position: absolute; display: block; }
#tttop {display:block; height:5px; margin-left:5px; overflow:hidden; }
#ttcont {display:block; padding:2px 12px 4px 12px; margin-left:5px; background:#DCDAE5;border:1px solid #D3D1DD; color: #222;  font-size: 12px; line-height: 15px; z-index: 10000;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;box-shadow: 2px 2px 1px #888;}
#ttbot {display:block; height:5px; margin-left:5px; overflow:hidden; }
#ttcont p {}
ну сами там свойства поменяете как надо...

пример кода:
Код:
<div onMouseOver="tooltip.show('<p>Подсказка</p>');" onMouseOut="tooltip.hide();">123</div>
форматирование поддерживается (свои CSS-классы никто добавлять не запрещает), громоздким решение не считаю.
 
Старый 11.07.2011, 14:43   #3
Спасибо, я уже видел этот пример - не могу понять, зачем там 3 div'a ?
 
Старый 11.07.2011, 14:46   #4
а я не заморачиваюсь. весит мало, работает на ура, а это главное.
 
Старый 12.07.2011, 11:35   #5
Спасибо за совет - действительно, лучше сосредоточиться на дальнейшем развитии проекта, чем копаться в деталях. Может, позже разберусь.
 
Старый 12.07.2011, 11:35
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающие подсказки tooltip на javascript, работа с кукисами, кодим prototype HTML, CSS, JavaScript 1 30.07.2011 10:36
js: window close() unhappy Зал дебютантов 3 13.03.2004 07:45
window.open OUT HTML, CSS, JavaScript 3 07.03.2004 01:58
Вопрос по window.open Spy HTML, CSS, JavaScript 2 27.09.2003 19:26


Текущее время: 17:39. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум