Всплывающие подсказки tooltip на javascript:
Все началось с того что я решил найти готовый движок всплывающих подсказок tooltip.
Не найдя того что мне нужно, я был вынужден написать свой движок.
Тщательно протестировал его на старых браузерах, так что можете быть уверенными что код работает во всех браузерах, а в браузере IE аж начиная с версии 5,5
Теперь разберем как работает код!
Подробное описание:
В чем вообще преимущество данного движка?
В том что не нужно ничего программировать и разбираться в коде
Давайте сразу разберем пример:
Допустим у вас есть 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 своя подсказка?
Для начала подключите код движка желательно перед тегом </head>
Можете поместить этот движок в отдельный файл, например tooltip.js без тегов и подключать его к своему сайту:
| Код |
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,
'font_color':'#000000',
'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= document.createElement('div');
el.setAttribute('id', 'tooltip_panel');
el.style.position='absolute';
el.style.zIndex=30;
el.style.top='0px';
el.style.left='0px';
el.style.visibility='hidden';
el.style.display='none';
document.body.appendChild(el);
var el_m=[];
for(var i=0;i<8;i++) {
if(args['img']) {
if(ie && args['bg_img_'+(i+1)].toLowerCase().indexOf('.png')!= -1) {
switch(i) {
case 0:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_1']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 1:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_2']+'\',sizingMethod=\'scale\'); height:'+args['height']+'px; font-size:1px;';
break;
case 2:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_3']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 3:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_4']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; font-size:1px;';
break;
case 4:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_5']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; font-size:1px;';
break;
case 5:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_6']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 6:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_7']+'\',sizingMethod=\'scale\'); height:'+args['height']+'px; font-size:1px;';
break;
case 7:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_8']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
}
}
else {
switch(i) {
case 0:
el_m[i]='background-image:url('+args['bg_img_1']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 1:
el_m[i]='background-image:url('+args['bg_img_2']+'); height:'+args['height']+'px; font-size:1px;';
break;
case 2:
el_m[i]='background-image:url('+args['bg_img_3']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 3:
el_m[i]='background-image:url('+args['bg_img_4']+'); width:'+args['width']+'px; font-size:1px;';
break;
case 4:
el_m[i]='background-image:url('+args['bg_img_5']+'); width:'+args['width']+'px; font-size:1px;';
break;
case 5:
el_m[i]='background-image:url('+args['bg_img_6']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 6:
el_m[i]='background-image:url('+args['bg_img_7']+'); height:'+args['height']+'px; font-size:1px;';
break;
case 7:
el_m[i]='background-image:url('+args['bg_img_8']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
}
}
}
else {
switch(i) {
case 0:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 1:
el_m[i]='background-color:'+args['bg_color']+'; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 2:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 3:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; font-size:1px; overflow:hidden;';
break;
case 4:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; font-size:1px; overflow:hidden;';
break;
case 5:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 6:
el_m[i]='background-color:'+args['bg_color']+'; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 7:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
}
el.style.border=args['border'];
}
}
el.innerHTML=''+
'<table border="0" cellpadding="0" cellspacing="0">'+
'<tr>'+
'<td><div style="'+el_m[0]+'"></div></td>'+
'<td><div style="'+el_m[1]+'"></div></td>'+
'<td><div style="'+el_m[2]+'"></div></td>'+
'</tr>'+
'<tr>'+
'<td style="'+el_m[3]+'"></td>'+
'<td style="font-family:Tahoma,Verdana,Arial,Times New Roman,Helvetica,sans-serif; font-size:'+args['font']+'px; color:'+args['font_color']+'; background-color:'+args['bg_color']+'; white-space:nowrap;" id="td_tooltip_txt"></td>'+
'<td style="'+el_m[4]+'"></td>'+
'</tr>'+
'<tr>'+
'<td><div style="'+el_m[5]+'"></div></td>'+
'<td><div style="'+el_m[6]+'"></div></td>'+
'<td><div style="'+el_m[7]+'"></div></td>'+
'</tr>'+
'</table>';
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(1).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 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,
'font_color':'#000000',
'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>
|
Все описанные выше скрипты с примерами собраны в архив:
|
