prototype (блог) , 24 июл 2011 - 21:57

всплывающая подсказка

Всплывающая подсказка tooltip на javascript

Добрый вечер!
Все началось с того что я решил найти готовый движок всплывающих подсказок tooltip.
Ничего не нашел, разве что jQuery но я его не люблю по моему скромному мнению от него нет пользы.
Я написал на javascript модуль всплывающие подсказки и безмерно радостный решил протестировать.
Во всех новых браузерах все прекрасно работает, но вот когда я открыл IE6 то очень разозлился ]:->
Быть может вы сможете помочь мне и разобраться что именно не нравится в моем коде Internet Explorer 6 ?
Буду вам очень всем благодарен.
Если получится исправить этот не дочет считайте что лучше движка, в плане функциональности, чем мой, не существует.

Прикрепляю для всех жаждущих мне помочь сам код и архив с примером.

[B]Подробное описание:[/B]

В чем вообще преимущество данного движка?
В том что не нужно ничего программировать и разбираться в коде
Давайте сразу разберем пример:
Допустим у вас есть html код в котором есть теги у которых есть id

<br /><br /><br /><br /><br />
<div id="lololo">наведи сюда мышь 1</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="lololox">наведи сюда мышь 2</div>
<br /><br /><br /><br /><br />

Как сделать так чтобы при навидении на div-ы с id равными lololo и lololox всплывали подсказки причем для каждого id своя подсказка?

Все очень просто нужно просто подключить вот такой просто javascript код:

<script type="text/javascript">
		tooltip.create({
			'img':true,
			'border':'1px solid #000000',
			'bg_img_1':'imgtool/tooltip-1.png',
			'bg_img_2':'imgtool/tooltip-2.png',
			'bg_img_3':'imgtool/tooltip-3.png',
			'bg_img_4':'imgtool/tooltip-4.png',
			'bg_img_5':'imgtool/tooltip-5.png',
			'bg_img_6':'imgtool/tooltip-6.png',
			'bg_img_7':'imgtool/tooltip-7.png',
			'bg_img_8':'imgtool/tooltip-8.png',
			'bg_color':'#ffffff',
			'width':19,
			'height':15,
			'font':12,
			'id_el':[
					'lololo',
					'lololox'
				],
			'id_txt':[
					'Это всплывающая подсказка<br />новая строка в ней',
					'Еще одна подсказка!!!!!!!'
				]
			'pos':'bottomright',
			't':10,
			'l':15,
			'timer_on':30,
			'speed_on':5,
			'timer_off':30,
			'speed_off':5,
			'alpha_end':100
					});
</script>

Давайте теперь посмотрим для чего нужен какой параметр:

'img' - может принимать значение как true так и false
при установке true рамка подсказок формируется из изображений, при false из обычного бордюра

'border' - если img установлен false то здесь пишутся параметры толщина цвет бордюра рамки всплывающей подсказки аналогично как в css

Если параметр img установлен true, то для формирования рамки всплывающих подсказок будут использованы следующие изображение
'bg_img_1' - изображение левого верхнего угла рамки
'bg_img_2' - изображение верхнего центр рамки
'bg_img_3' - изображение правого верхнего угла рамки
'bg_img_4' - изображение левого центра рамки
'bg_img_5' - изображение правого центра рамки
'bg_img_6' - изображение левого нижнего угла рамки
'bg_img_7' - изображение нижнего центра рамки
'bg_img_8' - изображение правого нижнего угла рамки

'bg_color' - цвет фона рамки

Если параметр img установлен true, то размеры угловых картинок рамки будут устанавливаться в свойстве width и height, если параметр img установлен false то параметры width и height будут отступом между текстом и рамкой, соответственно width слева и справа, height сверху и снизу рамки.
'width' - ширина угловых изображений рамки, либо отступ слева и справа от рамки, в зависимости от установок параметра img
'height' - высота угловых изображений рамки, либо отступ сверху и снизу от рамки, в зависимости от установок параметра img

'font' - размер шрифта подсказки в пикселях

'id_el' - массив идентификаторов id для которых устанавливается подсказка

'id_txt' - массив текста подсказок, для каждого id из параметра id_el своя подсказка в той же последовательности.

Подсказка может всплывать слева внизу от курсора, справа внизу, слева сверху, справа сверху, либо автоматически будет вычисляться оптимальное положение подсказки.
'pos' - Подсказка позиционируется автоматически - 'auto', всплывает слева вверху от курсора - 'topleft' либо 'lefttop', всплывает справа сверху от курсора - 'topright' либо 'righttop', всплывает слева внизу от курсора - 'bottomleft' либо 'leftbottom', всплывает справа внизу от курсора - 'bottomright' либо 'rightbottom'

't' - отступ рамки подсказки от курсора в пикселях слева либо справа в зависимости от установок параметра pos

'l' - отступ рамки подсказки от курсора в пикселях сверху либо снизу в зависимости от установок параметра pos

'timer_on' - скорость появления подсказки в миллисекундах

'speed_on' - скорость появления подсказки от 1 - до значения параметра alpha_end

'timer_off' - скорость исчезновения подсказки в миллисекундах

'speed_off' - скорость исчезновения подсказки от значения параметра alpha_end - до 1

'alpha_end' - прозрачность отображаемой подсказки от 0 до 100, где 0 полная прозрачность

Большинство параметров не требуют установки, поэтому можно упростить наш скрипт и написать его так:

<script type="text/javascript">
		tooltip.create({
			'id_el':[
					'lololo',
					'lololox'
				],
			'id_txt':[
					'Это всплывающая подсказка<br />новая строка в ней',
					'Еще одна подсказка!!!!!!!'
				]
			'pos':'auto'
					});
</script>

можно написать и так, обратите внимание что подсказка представляет собой изображение!

<script type="text/javascript">
		tooltip.create({
			'img':false,
			'border':'1px solid #000000',
			'id_el':[
					'lololo',
					'lololox'
				],
			'id_txt':[
					'<img src="http://nagon.net/uploads/images/26/26-bfig739m1.jpg" border="0" />',
					'Еще одна подсказка!!!!!!!'
				]
			'pos':'bottomright',
					});
</script>

Видите как все просто?
Естественно просто так это все работать не будет.
Сначала нужно подключить код движка после тега в вашем html коде

Вот сам код движка:

<script type="text/javascript">
var tooltip = {
	create:function (args) {
		args = args || {};
		var default_args = {
			'img':true,
			'border':'1px solid #000000',
			'bg_img_1':'imgtool/tooltip-1.png',
			'bg_img_2':'imgtool/tooltip-2.png',
			'bg_img_3':'imgtool/tooltip-3.png',
			'bg_img_4':'imgtool/tooltip-4.png',
			'bg_img_5':'imgtool/tooltip-5.png',
			'bg_img_6':'imgtool/tooltip-6.png',
			'bg_img_7':'imgtool/tooltip-7.png',
			'bg_img_8':'imgtool/tooltip-8.png',
			'bg_color':'#ffffff',
			'width':19,
			'height':15,
			'font':12,
			'id_el':[],
			'id_txt':[],
			'pos':'bottomright',
			't':10,
			'l':15,
			'timer_on':30,
			'speed_on':5,
			'timer_off':30,
			'speed_off':5,
			'alpha_end':100
		}
		
		for(var index in default_args) {
			if(typeof args[index] == "undefined") args[index] = default_args[index];
		}
		
		var ie = window.navigator.appName=='Microsoft Internet Explorer' ? true : false;

		var el=[];
		el[0]= document.createElement('div');
		el[0].setAttribute('id', 'tooltip_panel');
		el[0].setAttribute('style', 'position: absolute; z-index: 30; visibility:hidden; display:none;');
		document.body.appendChild(el[0]);
		
		el[1]= document.createElement('table');
		el[1].setAttribute('border', '0');
		el[1].setAttribute('cellspacing', '0');
		el[1].setAttribute('cellpadding', '0');
		el[0].appendChild(el[1]);
		
		el[2]= document.createElement('tr');
		el[1].appendChild(el[2]);
		
		
		el[14]= document.createElement('td');
		el[2].appendChild(el[14]);
		
		
		el[3]= document.createElement('div');
		if(args['img']) {
			if(ie && args['bg_img_1'].toLowerCase().indexOf('.png')!= -1) {
				el[3].setAttribute('style', 'background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+args['bg_img_1']+'",sizingMethod="scale"); width:'+args['width']+'px; height:'+args['height']+'px;');
			}
			else {
				el[3].setAttribute('style', 'background-image:url('+args['bg_img_1']+'); width:'+args['width']+'px; height:'+args['height']+'px;');
			}
		}
		else {
			el[3].setAttribute('style', 'border-top:'+args['border']+'; border-left:'+args['border']+'; background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px;');
		}
		el[14].appendChild(el[3]);
		
		
		el[15]= document.createElement('td');
		el[2].appendChild(el[15]);
		
		
		el[4]= document.createElement('div');
		if(args['img']) {
			if(ie && args['bg_img_2'].toLowerCase().indexOf('.png')!= -1) {
				el[4].setAttribute('style', 'background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+args['bg_img_2']+'",sizingMethod="scale"); height:'+args['height']+'px;');
			}
			else {
				el[4].setAttribute('style', 'background-image:url('+args['bg_img_2']+'); height:'+args['height']+'px;');
			}
		}
		else {
			el[4].setAttribute('style', 'border-top:'+args['border']+'; background-color:'+args['bg_color']+'; height:'+args['height']+'px;');
		}
		el[15].appendChild(el[4]);
		
		
		el[16]= document.createElement('td');
		el[2].appendChild(el[16]);
		
		
		el[5]= document.createElement('div');
		if(args['img']) {
			if(ie && args['bg_img_3'].toLowerCase().indexOf('.png')!= -1) {
				el[5].setAttribute('style', 'background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+args['bg_img_3']+'",sizingMethod="scale"); width:'+args['width']+'px; height:'+args['height']+'px;');
			}
			else {
				el[5].setAttribute('style', 'background-image:url('+args['bg_img_3']+'); width:'+args['width']+'px; height:'+args['height']+'px;');
			}
		}
		else {
			el[5].setAttribute('style', 'border-top:'+args['border']+'; border-right:'+args['border']+'; background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px;');
		}
		el[16].appendChild(el[5]);
		
		
		el[6]= document.createElement('tr');
		el[1].appendChild(el[6]);
		
		
		el[7]= document.createElement('td');
		if(args['img']) {
			if(ie && args['bg_img_4'].toLowerCase().indexOf('.png')!= -1) {
				el[7].setAttribute('style', 'background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+args['bg_img_4']+'",sizingMethod="scale"); width:'+args['width']+'px;');
			}
			else {
				el[7].setAttribute('style', 'background-image:url('+args['bg_img_4']+'); width:'+args['width']+'px;');
			}
		}
		else {
			el[7].setAttribute('style', 'border-left:'+args['border']+'; background-color:'+args['bg_color']+'; width:'+args['width']+'px;');
		}
		el[6].appendChild(el[7]);
		
		
		el[17]= document.createElement('td');
		el[6].appendChild(el[17]);
		
		
		el[8]= document.createElement('div');
		el[8].setAttribute('id', 'td_tooltip_txt');
		el[8].setAttribute('style', 'font-family:Tahoma,Verdana,Arial,Times New Roman,Helvetica,sans-serif; font-size:'+args['font']+'px; background-color:'+args['bg_color']+';white-space:nowrap;');
		el[17].appendChild(el[8]);
		
		
		el[9]= document.createElement('td');
		if(args['img']) {
			if(ie && args['bg_img_5'].toLowerCase().indexOf('.png')!= -1) {
				el[9].setAttribute('style', 'background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+args['bg_img_5']+'",sizingMethod="scale"); width:'+args['width']+'px;');
			}
			else {
				el[9].setAttribute('style', 'background-image:url('+args['bg_img_5']+'); width:'+args['width']+'px;');
			}
		}
		else {
			el[9].setAttribute('style', 'border-right:'+args['border']+'; background-color:'+args['bg_color']+'; width:'+args['width']+'px;');
		}
		el[6].appendChild(el[9]);
		
		
		el[10]= document.createElement('tr');
		el[1].appendChild(el[10]);
		
		
		el[18]= document.createElement('td');
		el[10].appendChild(el[18]);
		
		
		el[11]= document.createElement('div');
		if(args['img']) {
			if(ie && args['bg_img_6'].toLowerCase().indexOf('.png')!= -1) {
				el[11].setAttribute('style', 'background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+args['bg_img_6']+'",sizingMethod="scale"); width:'+args['width']+'px; height:'+args['height']+'px;');
			}
			else {
				el[11].setAttribute('style', 'background-image:url('+args['bg_img_6']+'); width:'+args['width']+'px; height:'+args['height']+'px;');
			}
		}
		else {
			el[11].setAttribute('style', 'border-bottom:'+args['border']+'; border-left:'+args['border']+'; background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px;');
		}
		el[18].appendChild(el[11]);
		
		
		el[19]= document.createElement('td');
		el[10].appendChild(el[19]);
		
		
		el[12]= document.createElement('div');
		if(args['img']) {
			if(ie && args['bg_img_7'].toLowerCase().indexOf('.png')!= -1) {
				el[12].setAttribute('style', 'background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+args['bg_img_7']+'",sizingMethod="scale"); height:'+args['height']+'px;');
			}
			else {
				el[12].setAttribute('style', 'background-image:url('+args['bg_img_7']+'); height:'+args['height']+'px;');
			}
		}
		else {
			el[12].setAttribute('style', 'border-bottom:'+args['border']+'; background-color:'+args['bg_color']+'; height:'+args['height']+'px;');
		}
		el[19].appendChild(el[12]);
		
		
		el[20]= document.createElement('td');
		el[10].appendChild(el[20]);
		
		
		el[13]= document.createElement('div');
		if(args['img']) {
			if(ie && args['bg_img_8'].toLowerCase().indexOf('.png')!= -1) {
				el[13].setAttribute('style', 'background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+args['bg_img_8']+'",sizingMethod="scale"); width:'+args['width']+'px; height:'+args['height']+'px;');
			}
			else {
				el[13].setAttribute('style', 'background-image:url('+args['bg_img_8']+'); width:'+args['width']+'px; height:'+args['height']+'px;');
			}
		}
		else {
			el[13].setAttribute('style', 'border-bottom:'+args['border']+'; border-right:'+args['border']+'; background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px;');
		}
		el[20].appendChild(el[13]);
	
		this.param.pos=args['pos'];
		this.param.l=args['l'];
		this.param.t=args['t'];
		this.param.timer_on=args['timer_on'];
		this.param.speed_on=args['speed_on'];
		this.param.timer_off=args['timer_off'];
		this.param.speed_off=args['speed_off'];
		this.param.alpha_end=args['alpha_end'];
		this.param.id_el=args['id_el'];
		this.param.id_txt=args['id_txt'];
		
		this.param.start();
	},
	get_elm:function (n) {
		switch(n) {
			case 1:
				return document.getElementById('tooltip_panel');
			break;
			case 2:
				return document.getElementById('td_tooltip_txt');
			break;
		}
	},
	param: {
		pos:'auto',
		t:0,
		l:0,
		timer_on:0,
		speed_on:0,
		timer_off:0,
		speed_off:0,
		alpha:0,
		alpha_end:0,
		id_el:[],
		id_txt:[],
		get_tiou:0,
		start: function () {
			var tooltip_el;
			window.onload = function() {
				for(var i=0;i<tooltip.param.id_el.length;i++) {
					tooltip_el=document.getElementById(tooltip.param.id_el[i]);
					tooltip_el.onmousemove=function (e) {
						tooltip.onmmo(e);
					}
					tooltip_el.onmouseover=function (e) {
						tooltip.onmov(e,this.id);
						//tooltip.onmov(e,this.getAttribute('id'));
					}
					tooltip_el.onmouseout=function () {
						tooltip.onmou();
					}
				}
			}
		}
	},
	onmmo: function (e) {
		var xy = this.getp(e);
		var p = this.param.pos;
		var cxy = this.getc();
		//this.get_elm(2).clientWidth
		if(p=='auto') {
			if(xy.x>cxy.x && xy.y<cxy.y) {//topright ---> bottomleft
				this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
				this.get_elm(1).style.top=xy.y+this.param.t+'px';
			}
			else if(xy.x>cxy.x && xy.y>cxy.y) {//bottomright ---> topleft
				this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
				this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
			}
			else if(xy.x<cxy.x && xy.y>cxy.y) {//bottomleft ---> topright
				this.get_elm(1).style.left=xy.x+this.param.l+'px';
				this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
			}
			else if(xy.x<=cxy.x && xy.y<=cxy.y) {//topleft ---> bottomright
				this.get_elm(1).style.left=xy.x+this.param.l+'px';
				this.get_elm(1).style.top=xy.y+this.param.t+'px';
			}
		}
		else if(p=='topleft' || p=='lefttop') {
			this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
			this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
		}
		else if(p=='topright' || p=='righttop') {
			this.get_elm(1).style.left=xy.x+this.param.l+'px';
			this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
		}
		else if(p=='bottomleft' || p=='leftbottom') {
			this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
			this.get_elm(1).style.top=xy.y+this.param.t+'px';
		}
		else if(p=='bottomright' || p=='rightbottom') {
			this.get_elm(1).style.left=xy.x+this.param.l+'px';
			this.get_elm(1).style.top=xy.y+this.param.t+'px';
		}
	},
	onmov: function (e,atr) {
		this.noerr();
		this.get_elm(1).style.visibility='visible';
		this.get_elm(1).style.display='block';
		this.settxt(atr);
		this.param.alpha=0;
		tooltip.show();
		this.onmmo(e);
	},
	onmou: function () {
		this.noerr();
		tooltip.hide();
	},
	settxt: function (atr) {
		for(var x in tooltip.param.id_el) {
			if(tooltip.param.id_el[x]===atr) {
				this.get_elm(2).innerHTML=tooltip.param.id_txt[x];
			}
		}
	},
	show: function () {
		this.get_elm(1).style.opacity=this.param.alpha*.01;
		this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha+')';
		this.param.alpha=this.param.alpha+this.param.speed_on;
		if(this.param.alpha<this.param.alpha_end) {
			this.param.get_tiou=setTimeout('tooltip.show();',this.param.timer_on);
		}
		else {
			this.get_elm(1).style.opacity=this.param.alpha_end*.01;
			this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha_end+')';
			this.param.alpha=this.param.alpha_end;
		}
	},
	hide: function () {
		this.get_elm(1).style.opacity=this.param.alpha*.01;
		this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha+')';
		this.param.alpha=this.param.alpha-this.param.speed_off;
		if(this.param.alpha>0) {
			this.param.get_tiou=setTimeout('tooltip.hide();',this.param.timer_off);
		}
		else {
			this.get_elm(1).style.opacity=this.param.alpha_end*.01;
			this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha_end+')';
			this.param.alpha=0;
			this.get_elm(1).style.visibility='hidden';
			this.get_elm(1).style.display='none';
		}
	},
	noerr: function () {
		clearTimeout(this.param.get_tiou);
	},
	getp: function (e) {
		var x=0, y=0;
		if(!e) {e = window.event;}
		if(e.pageX || e.pageY) {
			x=e.pageX;
	  		y=e.pageY;
		}
		else if(e.clientX || e.clientY) {
			x=e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft)-document.documentElement.clientLeft;
	  		y=e.clientY+(document.documentElement.scrollTop || document.body.scrollTop)-document.documentElement.clientTop;
		}
		return {"x":x, "y":y};
	},
	getc: function () {
		function getClientWidth() {
			return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
		}
		function getClientHeight() {
			return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
		}
		function getBodyScrollTop() {
			return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
		}
		function getBodyScrollLeft() {
			return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
		}
		function getClientCenterX() {
			return parseInt(getClientWidth()/2)+getBodyScrollLeft();
		}
		function getClientCenterY() {
			return parseInt(getClientHeight()/2)+getBodyScrollTop();
		}
		var x=0, y=0;
		x=getClientCenterX();
		y=getClientCenterY();
		return {"x":x, "y":y};
	}
};

</script>

Можете поместить этот движок в отдельный файл, например tooltip.js без тегов и подключать его к своему сайту.

Вот архив с готовым примером: только переименуйте jpg на zip - это архив

Прикрепленный файл	Размер
tooltipjs.zip_.jpg	7.43 кб

Блог: prototype

Автор: hogart, дата: 25 июля, 2011 - 13:08

#permalink

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

Ответить

Автор: kobezzza, дата: 25 июля, 2011 - 14:39

#permalink

"Если получится исправить этот не дочет считайте что лучше движка, в плане функциональности, чем мой, не существует."
самоуверенности сколько)

Хочешь реальную критику? Ужасно кривой код, куча избыточностей, куча параметров, которые удобнее и проще задавать через CSS, кривое АПИ, и не будь наивен, твоё добро никому не нужно.

И кста, плодить темы на форуме - не гуд.

Ответить

Автор: prototype, дата: 25 июля, 2011 - 21:32

#permalink

вначале все и было в CSS и html
я подправил и решил все сделать динамически
кстати первый вариант работает и в IE6

Ответить

Автор: torbasow, дата: 31 июля, 2011 - 12:26

#permalink

Перепишите на jQuery, тогда проблем с IE6 не будет. Вот Вам и польза от jQuery.

А вообще: да забудьте Вы уже про этот неупокоенный браузер.

Ответить

Автор: Гость (не зарегистрирован), дата: 4 июля, 2013 - 18:35

#permalink

Internet Explorer 6 - GNP

Ответить

Автор: prototype, дата: 31 июля, 2011 - 13:30

#permalink

Код переписан
смотрим тут исходник
dump.ru/file/5330935
А тут тема
javascript.ru/node/11442

Ответить

Автор: trikadin, дата: 2 сентября, 2011 - 19:49

#permalink

400 строк ради всплывающих подсказок? Хе. Хе-хе.

Ответить

Автор: Гость (не зарегистрирован), дата: 23 марта, 2012 - 19:53

#permalink

Итак, рецепт:
HTML:

Код:

1234

Ссылка Подсказка

Пока все просто. Далее начинается магия.
CSS:

Код:

0102030405060708091011121314151617181920212223242526

/* tooltip */ .tooltip { position: relative; }.tooltip span { position: absolute; right: 0; top: -30px; display: none; min-width: 50px; padding: 3px 8px; white-space: nowrap; font-size: 11px; text-align: right; background-color: rgba(0,0,0,.8); -webkit-border-radius: 5px; -moz-border-radius: 5px; color: #fff;}.tooltip span small { position: absolute; right: 10px; bottom: -6px; border-top: 6px solid rgba(0,0,0,.8); border-left: 6px solid transparent;}.tooltip:hover span { display: block; }

Теперь остается лишь вставить костыль для IE:

Код:

010203040506070809101112131415

/* для IE */ .tooltip span { background-color: #000; }.tooltip span small { border-top: 6px solid #000; } /* фиксим проблему со стрелочкой в IE 6 */ *html .tooltip span small { border-left: 6px solid #363636; /* Соответствует цвету фона */} /* фиксим проблему в IE 8 */ .tooltip span { background-color /*\**/: #000\9 }.tooltip span small { border-top /*\**/: 6px solid #000; }

На это магия заканчивается.

Внимательный читатель заметит, что бакгроунд для вменяемых браузеров задан в формате RGBa — это дает полупрозрачность. Я где-то встречал что и для IE его можно применять через фильтры, но сейчас вспомнить не удалось. Поэтому, данную тему оставим на следующий раз. Удачи.

Ответить

Автор: Гость (не зарегистрирован), дата: 13 апреля, 2022 - 09:44

#permalink

Uslugi roksa

Ответить

Отправить комментарий

Приветствуются комментарии:

Полезные.
Дополняющие прочитанное.
Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
Для остальных вопросов и обсуждений есть форум.

P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.

Ваше имя:

Адрес электронной почты:

Содержание этого поля является приватным и не предназначено к показу.

Домашняя страница:

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

Адреса страниц и электронной почты автоматически преобразуются в ссылки.
Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
Строки и параграфы переносятся автоматически.
Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA

Антиспам

Вопрос: * 4 + 9 =

Введите результат. Например, для 1+3, введите 4.

Поиск по сайту

Другие записи этого автора
prototype cookies - как быстренько испечь пирожки на javascript в стиле php

Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
еще

Последние комментарии

귀하가 게시 한 정보는 매우 유용합니다. 추천 한 사이트가 좋았습니다...
10 минут 23 секунды назад
Wow what a Great Information about...
57 минут 17 секунд назад
trezor app is a secure digital wallet...
1 час 29 минут назад
trezor app is a secure digital wallet...
1 час 29 минут назад
Эта функция помогает пользователям...
2 часа 7 секунд назад
Trezor Suite is a one-stop destination...
2 часа 9 минут назад
When you don't have an internet...
4 часа 3 минуты назад
The io games arena welcomes you at any...
4 часа 9 минут назад
Cool you write, the information is very...
5 часов 5 минут назад
This information is essential to my...
6 часов 13 минут назад

Последние темы на форуме

Forum

Форум

Справочник

Discord чат

Курсы javascript

Всплывающая подсказка tooltip на javascript

Отправить комментарий

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное