html风格tooltip效果的实现

原创 2006年05月25日 13:01: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。

ToolTip用HTML实现

第一种方式:适合于全部HTML标签 acronym title="World Wide Web"> WWW acronym>第二种方式:IMG之类的标签例如: alt="鼠标移动到上方会显示并且未加载...
  • kxlf4600
  • kxlf4600
  • 2009年01月12日 20:16
  • 8147

html添加tooltip

需求:给表单每个信息项添加一个帮助信息,当mouseover或focus时激活帮助信息效果:程序实现:/*    2007-01-30 lisq custom tooltip    use age: ...
  • yuhua3272004
  • yuhua3272004
  • 2010年06月11日 20:39
  • 2912

JS特效:鼠标悬停显示提示

function showtip2(current,e,text) { if (document.readyState=="complete") { document.all.tooltip2...
  • hn307165411
  • hn307165411
  • 2014年04月13日 21:33
  • 12599

Bootstrap插件(四)——工具提示(tooltip.js)

工具提示的应用场景是某些内容的辅助提示,在元素被点击或者获取焦点是提示用户。都是比较简单是使用,我依然直接用一个例子来进行学习。 依然是先看实现的效果,效果图如下:  代码实现如下...
  • qq_28057577
  • qq_28057577
  • 2017年09月15日 21:38
  • 179

用css伪元素实现tooltip效果

以前都是用js来实现的tooltip效果,现在其实可以用css的伪元素来实现,会更简单,效果也很不错! .tooltip a {position: relative;} .toolt...
  • MajorMayer
  • MajorMayer
  • 2016年01月24日 19:48
  • 2230

前端实现tooltip的常见实现方式

tooltip 即工具提示或提示文本,如下图所示 tooltip图 通常我们编写tooltip会有几种方式: 1. 采用dom节点 + 自定义数据组合,动态创建toolt...
  • terrychinaz
  • terrychinaz
  • 2017年04月20日 21:19
  • 722

js实现的tooltip简单小组件

tooltip主要是根据鼠标的移动到相应的文字上面,下面出现提示小浮动层效果,主要是用jquery来实现,代码下:var $win = $(window);//默认的参数 var default_o...
  • yilanyoumeng3
  • yilanyoumeng3
  • 2016年09月08日 16:53
  • 2306

自定义html中a标签的title提示tooltip

用简单的jquery+CSS3创建自定义的a标签title提示,用来代替浏览器默认行为。如图:...
  • lihui_830501
  • lihui_830501
  • 2014年05月21日 00:55
  • 2935

用css伪元素实现tooltip效果

以前都是用js来实现的tooltip效果,现在其实可以用css的伪元素来实现,会更简单,效果也很不错! .tooltip a {position: relative;} .toolt...
  • MajorMayer
  • MajorMayer
  • 2016年01月24日 19:48
  • 2230

前端实现tooltip的常见实现方式

tooltip 即工具提示或提示文本,如下图所示 tooltip图 通常我们编写tooltip会有几种方式: 1. 采用dom节点 + 自定义数据组合,动态创建toolt...
  • terrychinaz
  • terrychinaz
  • 2017年04月20日 21:19
  • 722
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html风格tooltip效果的实现
举报原因:
原因补充:

(最多只允许输入30个字)