html风格tooltip效果的实现
来源:互联网 发布:淘宝京东野马刷单软件 编辑:程序博客网 时间:2024/05/16 04:19
网页上的图片如果设置了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。
- html风格tooltip效果的实现
- html风格tooltip效果的实现
- QML的Label实现Tooltip提示效果
- 使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏
- ToolTip用HTML实现
- ToolTip用HTML实现
- CSS3实现Bootstrap的tooltip动画提示效果
- 原生js实现tooltip提示框的效果
- 实现ToolTip的方法
- 实现ToolTip的方法
- 用css伪元素实现tooltip效果
- 给DROPDOWNLIST加上TOOLTIP的效果
- 效果清新的水平方向ToolTip
- Tooltip效果 http://cceer.xmu.edu.cn/blog/post/tooltip.html
- 实现GridView Tooltip的功能
- jQuery实例: ToolTip的实现
- VC中Tooltip的实现
- VC中Tooltip的实现
- 如何创建圈子
- 怎么初始化static的map
- linux设备驱动的安全端口分配
- 配置svn时遇到错误 Invalid command 'DAV', (解决)
- 引最佳工具
- html风格tooltip效果的实现
- 参加MS SQL Server2005商务智能初体验
- 一些琏接:
- 终于,在面对一番质疑后,他们开始对言论进行控制了!
- 读书和读程序的相同之处
- 奇怪的static
- 删除记录中含图片记录的代码
- 放弃
- Tomcat5.5.x配置手册