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

Антиспам

Вопрос: * 5 + 1 =

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

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

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

Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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

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

Польза купить порошок мухомора в целом...
27 минут 51 секунда назад
The story of resilience is truly...
1 час 55 минут назад
I understand your feelings on missing...
1 час 57 минут назад
Monkey Mart welcomes commentary that is...
2 часа 1 минута назад
https://partsgeekautoparts...
8 часов 16 минут назад
Looking for fun and engaging websites?...
12 часов 24 минуты назад
Looking for a diverse range of AI tools...
12 часов 24 минуты назад
Looking for a diverse range of AI tools...
12 часов 24 минуты назад
Looking for fun and engaging websites?...
12 часов 25 минут назад
All Active Anime Reborn Codes https...
12 часов 26 минут назад

Последние темы на форуме
Проверка на ввод Получить элемент массива с вероятностью Window.local storage Тонгенератор Отследить появление элемента Нужен совет по верстве CSS Grid Жалобы и пожелания Forum

Форум

Справочник

Discord чат

Курсы javascript

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

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

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное