Javascript Tooltips
Saturday, 17. November 2012
Diese Javascript-Tooltips (Demo) machen auf mich einen guten Eindruck. Formatierbar mit HTML, ist es nicht zu schwer sie so zu erweitern, dass sie bei einem Klick auf das Element offen bleiben - denn darum geht es mir, Tooltips mit klickbaren Links.
Nutzen würde ich sie derzeit so:
dot.onmouseover=function(e) { tooltip.show(tooltipText, e, false); }; dot.onmouseout=function() { tooltip.hide(false); }; dot.onclick=function(e) { tooltip.hide(false); tooltip.show(tooltipText, e, true); document.querySelector("#ttclose").onclick = function() { tooltip.hide(true); } }
Und hier der von mir abgeänderte Code (rein experimentell und noch mit Formatierungsfehlern):
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,c,h;
var x;
var perma = false;
var ie = document.all ? true : false;
return {
show:function(tooltipText, e, permanent){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
tt.appendChild(c);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
}
tt.style.display = 'block';
c.innerHTML = tooltipText;
tt.style.width = e ? e + 'px' : 'auto';
if(!e && ie){
tt.style.width = tt.offsetWidth;
}
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);
perma = permanent
if (permanent && tt.querySelector("#"+id + "close") == null) {
x = document.createElement('div');
x.innerHTML = "x";
x.setAttribute('id',id + "close");
tt.insertBefore(x,c);
}
this.pos(e);
},
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 - h) + '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(permanent){
if (perma) {
if (permanent) {
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
} else {
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
}
};
}();
Stylesheet:
#tt { position: absolute; display: block; } #ttclose { border-top-left-radius: 3px; border-top-right-radius: 3px; background: #666; color: #fff; } #ttclose span { cursor: pointer; display: flex; display: -moz-flex; display: -webkit-flex; justify-content: flex-end; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; margin-right: 0.5em; } #ttcont { display: block; padding: 2px 12px 3px 7px; margin-left: 5px; background: #666; color: #fff; text-align: left; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } #ttcont a { color: white; } #ttcont ul { margin: 0; padding-left: 1em; } #ttcont h5 { margin-top: 0.1em; margin-bottom: 0.3em; }
Ergebnis:
onli blogging am : Hardwareempfehler verbessert: Empfehlung ändern
Vorschau anzeigen