html风格tooltip效果的实现

网页上的图片如果设置了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。

 
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现折线图动态tooltip效果,可以通过以下步骤进行操作: 1. 在echarts中定义一个tooltip组件,然后设置trigger为'axis',显示为true。 2. 定义一个formatter函数,用于设置tooltip的显示内容。可以在formatter函数中获取到当前鼠标所在的位置,然后通过echarts中的API获取到当前位置对应的数据信息。 3. 在图表的series中设置markPoint和markLine,用于在折线图上画出当前鼠标所在位置的点和线。 4. 在图表的option中设置tooltip的extraCssText属性,用于设置tooltip的样式。可以设置样式的颜色、背景色、字体等。 5. 最后,在option中设置animationDuration属性,用于设置动态效果的时间。 下面是一个示例代码: ```javascript option = { tooltip: { trigger: 'axis', show: true, formatter: function (params) { var res = params[0].name; for (var i = 0, l = params.length; i < l; i++) { res += '<br/>' + params[i].seriesName + ' : ' + params[i].value; } return res; }, extraCssText: 'background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 10px;' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'Sales', type: 'line', data: [120, 200, 150, 80, 70, 110, 130], markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }] }, markLine: { data: [{ type: 'average', name: '平均值' }] } }], animationDuration: 1000 }; ``` 以上代码实现了折线图的动态tooltip效果,通过设置formatter函数和extraCssText属性,可以自定义tooltip的样式和内容。通过设置markPoint和markLine,可以在折线图上画出当前鼠标所在位置的点和线,实现动态效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值