Всплывающая подсказка 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 - это архив
|
Вы, конечно, много усилий приложили, но начиная с 39-ой строки у вас в коде ужасный трэш. Напишите какой-нить простенький шаблонизатор и используйте его.
Перепишите на jQuery, тогда проблем с IE6 не будет. Вот Вам и польза от jQuery.
А вообще: да забудьте Вы уже про этот неупокоенный браузер.
400 строк ради всплывающих подсказок? Хе. Хе-хе.
Итак, рецепт:
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 его можно применять через фильтры, но сейчас вспомнить не удалось. Поэтому, данную тему оставим на следующий раз. Удачи.