鼠标滑过时显示一个非常漂亮的提示框,鼠标离开提示框消失,非常cool
查看演示页面 View Demo 查看全部代码 View Code
第一步:
点击这里下载全部资源
第二步:
在网页<head>区引用CSS样式
<link rel="stylesheet" type="text/css" href="style.css" />
第三步:
在网页<body>区添加以下代码
<p id="text">Lorem ipsum dolor sit amet, <span class="hotspot" onmouseover="tooltip.show('Testing 123 <strong>Testing 123</strong>');" onmouseout="tooltip.hide();">consectetuer adipiscing</span> elit. Aliquam id tellus. Nulla orci enim, vulputate et, pharetra eget, imperdiet non, sem. Mauris sit amet mi nec nulla porttitor dapibus. Curabitur leo sem, lacinia sed, commodo eu, mattis sit amet, felis. Ut tortor. Donec <span class="hotspot" onmouseover="tooltip.show('Testing 123<br />Testing 123');" onmouseout="tooltip.hide();">porttitor orci</span> et neque. Curabitur eget diam at libero egestas suscipit. In tortor est, ullamcorper eu, dapibus et, condimentum nec, nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel <span class="hotspot" onmouseover="tooltip.show('<img src=\'images/x_icon.gif\'/>');" onmouseout="tooltip.hide();">purus eget diam</span> aliquam luctus. Nullam risus ipsum, aliquam et, lacinia sit amet, fermentum vel, mi. In hac habitasse platea dictumst. Maecenas et dui non tortor lobortis feugiat. Donec eleifend iaculis arcu. Cras vitae leo nec nunc rhoncus laoreet. Integer eget enim. Nunc <span class="hotspot" onmouseover="tooltip.show('<strong>Lorem ipsum dolor sit amet</strong><br />Consectetuer adipiscing elit. Praesent lacinia, dui ut consequat bibendum, lorem dolor tristique tellus, at faucibus nibh est in orci. In pede.');" onmouseout="tooltip.hide();">dignissim cursus</span> mi. Donec eros.
<Br>
<span class="hotspot" onmouseover="tooltip.show('欢迎光临sharejs.com')" onmouseout="tooltip.hide();">sharejs.com</span>
</p>
<script type="text/javascript" language="javascript" src="script.js"></script>
要想给文本添加提示信息只需要给文本标签添加onmouseover和onmouseout事件
<span class="hotspot" onmouseover="tooltip.show('欢迎光临sharejs.com')" onmouseout="tooltip.hide();">sharejs.com</span>
普通文本和超级链接均可以实现这个效果




