转自http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/
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,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
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);
},
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(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
#tt {
position:absolute;
display:block;
background:url(images/tt_left.gif) top left no-repeat;
}
#tttop {
display:block;
height:5px;
margin-left:5px;
background:url(images/tt_top.gif) top right no-repeat;
overflow:hidden;
}
#ttcont {
display:block;
padding:2px 12px 3px 7px;
margin-left:5px;
background:#666;
color:#fff;
}
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(images/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}
使用:
onmouseover="tooltip.show('Testing 123 ', 200);"
onmouseout="tooltip.hide();"
分享到:
相关推荐
非常经典的javascript tooltip
源代码 博文链接:https://joerong666.iteye.com/blog/176259
javascript tooltip jquery tooltip demo js tooltip javascript tooltip demo
给HTML元素添加Title虽然也可实现tooltip,但是局限性太大,换行、添加图片等都比较麻烦,并且如果tooltip太长,可能等不到浏览者看完就消失了。这个示例解决了上诉问题!
使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化、事件绑定、事件冒泡等技巧和知识。 特效四个关键点: 显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示出来 隐藏:鼠标移开时,ToolTip...
JavaScript渐变链接提示tooltip封装类
在上面的示例中,我们定义了一个 tooltip,显示的内容为 `{a} {b} : {c}%`,其中 `{a}` 是系列名称,`{b}` 是数据名称,`{c}` 是数据值。 toolbox 的自定义 toolbox 是一种非常有用的功能,可以提供一些实用...
《经典的GridView72种使用技巧》及《JavaScript大全》
基于 Vue 的简单 tooltip 工具
jQuery的一款tooltip提示插件,通过鼠标悬停显示提示时间,提示内容使用ajax动态显示。
Tooltip V1.01 css请放到 styles目录里面,再在要使用样式的页面的最后加入这样一段代码: <script type="text/javascript" src="scripts/ToolTip.js"> <script type="text/javascript">initToolTip();</script>
这是一个vue的tooltip提示信息组件。它使用非常简便,同时它支持自定义样式,提示信息的位置,触发提示信息弹出的事件。提示出现隐藏的延迟时间等。
Hint.css是一款功能强大的Tooltip工具提示插件库。hint.css使用SASS来编写,不依赖于JavaScript。该tooltip插件使用data-*属性、伪元素、内容属性和CSS3过渡效果来制作tooltip。
control.get hashcode does not overwrite. 十分漂亮,鼠标移动到此处就能出现。...<script type="text/javascript" src="scripts/ToolTip.js"> <script type="text/javascript">initToolTip();</script>
js-css-tooltip是一款使用js和css3制作的tooltip工具提示插件。该tooltip插件显示时带css3动画特效,并且会自动根据元素所在的位置来定位工具提示的位置。
主要是支持tooltip 鼠标放上,能弹一div. 友好显示
JavaScript, DHTML Tooltips JavaScript Cross Browser Library. Developed by Walter Zorn ...An easy to use cross-browser Tooltip JavaScript Library that creates tooltips, information popup boxes
HTML元素的简单JavaScript工具提示。 无需额外CSS。 浏览器支持 Chrome 7,Firefox 4.0,IE9 Opera 11.60,Safari 5.1.4。 如果您具有的polyfill,则可以将浏览器支持扩展到IE8和朋友。 例子 <!-- Include the ...