html风格tooltip效果的实现
来源:asp之家 发布时间:2010-04-08 13:00:00
网页上的图片如果设置了alt属性,当鼠标移经时就会有tooltip出现,但是只能显示一行文本,有时需要多行文本,乃至图片来显示图片、链接或者其它HTML元素的提示信息时,alt属性就无能为力了。
在本文提供了一种实现方案:为图片、链接等任意需要tooltip的HTML元素加上一个自定义的属性——"tooltip",tooltip的值即为要显示的提示信息,可以是任意HTML代码。tooltip属性可在HTML代码中元素定义的标签中添加,比如<img src="yourpic.jpg" tooltip="It's a multiline tooltip!<br>And you can use pictures too!" ></img>,然后用下面讲述的 一段脚本,我已写成tooltip.js,实现对鼠标事件的捕获,即可实现HTML风格的tooltip。
tooltip的实现思想为获取需要显示TOOLTIP的元素的绝对位置,然后用一个DIV在鼠标位置显示其tooltip属性的值。以下是tooltip.js的代码和注释:
//为HTML容器增加TOOLTIP支持,参数e为你要添加的TOOLTIP支持的容器,如为document.body则为整个页面
//添加支持,如为某DIV则仅为该DIV中带有TOOLTIP属性的元素提供支持。
function addTipSupport(e) {
e.onmouseover = showTip;
e.onmouseout = hideTip;
e.onmousemove = showTip;
}
//获得控件的绝对位置,返回左上角坐标
function getElePos(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
return [l, t];
}
//显示TOOLTIP
function showTip() {
getElePos(event.srcElement);
if(event.srcElement.tooltip && event.srcElement.tooltip!='') {
altlayer.style.visibility='visible';
var cord = getElePos(event.srcElement);
altlayer.style.left=cord[0]+event.offsetX + 20;
altlayer.style.top=cord[1]+event.offsetY+25;
altlayer.innerHTML=event.srcElement.tooltip;
altlayer.style.zIndex = event.srcElement.style.zIndex + 1;
}
//else altlayer.style.visibility='hidden';
}
//隐藏TOOLTIP
function hideTip() {
altlayer.style.visibility = 'hidden';
}
本TOOLTIP的用法很简单,
(1)在</body>标签前加入以下代码:
<div style="visibility:hidden;border:2px groove orange;padding:5px;font-size:12px;background-color:#FFFFCC;position:absolute;" id=altlayer></div> //定义显示TOOLTIP的DIV风格
<script type="text/javascript" src="tooltip.js"></script> //引入tooltip.js
上面的DIV的ID一定要与tooltip.js中的ID相对应,此处为altlayer ,style可以设置成自己的风格,因而可使TOOLTIP带有自定义的风格。
(2)为需要支持TOOLTIP的容器元素增加TOOLTIP支持,以实现对鼠标事件的捕获,则该容器内所有带有TOOLTIP属性的元素均可有TOOLTIP风格。可在任意时候包括页面已经装载后增加支持,用以下一句即可:
<script type="text/javascript">
<!--
addTipSupport(document.body); //此处的参数可换成其它,以局限在某容器内支持TOOLTIP风格。
//-->
</script>
(3)为需要tooltip的HTML元素加上一个自定义的属性——"tooltip",tooltip的值即为要显示的提示信息,可以是任意HTML代码。tooltip属性可在HTML代码中元素定义的标签中添加,比如
<img src="yourpic.jpg" tooltip="It's a multiline tooltip!<br>And you can use pictures too!<br><img src='sompic.jpg'/>" ></img>。
此TOOLTIP的优点在于可以设定只在相关的容器范围内支持TOOLTIP,以减少不必要的开销;用来显示TIP的DIV风格可以自己任意设定,TOOLTIP属性值可为任意HTML代码,因而风格是完全可定制的;代码易改动,可进一步改动为不同地方实现不同风格的TOOLTIP。


猜你喜欢
- 前言range() 和 xrange() 是两个函数,可用于在 Python的 for 循环中迭代一定次数。在 Python 3 中,没有
- 引言承接上篇 parseHTML 函数源码解析拿到返回值后的处理接下来我们将会讲解当 textEnd === 0 解析器遇到结束标签,par
- Python字符串处理字符串输入:my_string = raw_input("please input a word:"
- 额额,标题已经很醒目了,通过中间件去实现,其他方法也可以实现浏览器前端传来的请求,必须通过中间件,才能到后面路由,视图函数,所以我们在中间件
- 下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads上传到服务器rz
- Python 登录网站详解及实例对于大部分论坛,我们想要抓取其中的帖子分析,首先需要登录,否则无法查看。这是因为 HTTP 协议是一个无状态
- 守来说,AJAX在现在是热得不能再热的技术。没有人能否认,它拥有大批的支持者。在CNN上,它从二月份的一个不被看好的词语到十月份成长成一个初
- 本文实例为大家分享了JS实现用户管理系统的具体代码,供大家参考,具体内容如下效果图:html代码: <h1>
- 标题pycharm专业版(python License Activate)python运行的环境大多数人用的比较多的是pycharm,但是很
- 本文实例讲述了Python获取运行目录与当前脚本目录的方法。分享给大家供大家参考。具体实现方法如下:import osimport sys#
- 大部分面向对象的编程语言(除了C++)都只支持单继承,而不支持多继承,为什么呢?因为多继承不仅增加编程复杂度,而且容易导致莫名其妙的错误。P
- 字符串字面量python 中的字符串字面量由单引号或双引号括起。‘hello’ 等同于 &l
- js中没有foreach这个关键字,但是可以用var v in array来实现遍历。但是需要注意的是, 拿到的是key而不是value。看
- Python有自己内置的标准GUI库--Tkinter,只要安装好Python就可以调用。今天学习到了图形界面设计的问题,刚开始就卡住了。为
- 看书笔记db file scattered read DB ,db file sequential read DB,free buffer
- Access数据库,同时操作大量记录(9500条以上)时报错。错误提示:Microsoft JET Database Engine 错误 &
- 本文是Python通过TensorFlow卷积神经网络实现猫狗识别的姊妹篇,是加载上一篇训练好的模型,进行猫狗识别本文逻辑:我从网上下载了十
- 今天记录一下pandas筛选出一个表中满足另一个表中所有条件的数据。例如:list1 结构:名字,ID,颜色,数量,类型。list1 = [
- slice:eg:>>>e=[0,1,2,3,4,5,6]>>>s=slice(2,3)>>
- 前言 大家好,好男人就是我,我就是好男人,我就是-0nise。在各大漏洞举报平台,我们时常会