一些小伙伴可能“不加思索”的就有想法了：父元素里包含两个兄弟元素，其一就是这个icon，其二就是它的工具提示文本；在父元素上设置鼠标移入、移出来实现交互就OK了。实例如下：
ok，这样当然可以实现效果啦。不过嘛~~~在这里，icon的父元素用的是div，宽和高都没有限制。只是对icon的大小做了限定（如下）：
然而实际情况中，icon的父级元素可能就比它大一点点，甚至是和它大小一致（如下）：
这个时候，tooltip的展示效果如何呢？看看下图吧：
吼吼吼~~~效果是不是超出预期啦？
有的小伙伴可能会说，那也难不住我呀，给tootip设置一下样式不就ok了。嗯，也对！如下：
ok，这样设置在这里确实OK了。
但是，tootip工具提示文本在实际情况中可是有长有短的哦。以中文来说，有的可能就是两个汉字，有的可能八九个汉字，工具栏一般都有很多项工具按钮，难道要一个个去设置吗？况且现在都是组件化开发了。如果以最大宽度去设置，文字长度最长的当然可以容纳下，那文字长度短的容器内岂不是要大片留白？这种效果恐怕自己都得尴尬死！！
还有两点需要提醒一下：
1、工具提示文本的边框也还没有设置；
2、如果该工具按钮上还有onclick事件，onmouseover还会和它冲突哦，但很不幸的是，实际情况中就是有onclick事件。
唉，是不是头都要大了？一个小小的tooltip竟然搞这么大了
其实呀，html有一个全局属性title可以帮你轻松又简单的实现哦
https://www.runoob.com/tags/att-global-title.html
回头再看之前的那些操作，是不是如此设置更简单省力！
下载一下jquery插件，然后新建一个ToolTip.js文件，在该文件下写入以下代码：$(function() {
var x = 10
var y = 10
$("a.tooltip").mouseover(function(e) {
this.myTitle = this.title
this.title = ""
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图' width='250px' height='250px'/><\/div>"//创建 div 元素
$("body").append(tooltip)//把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast") //设置x坐标和y坐标，并且显示
}).mouseout(function() {
this.title = this.myTitle
$("#tooltip").remove() //移除
}).mousemove(function(e) {
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
})
})
})
//]]>
在页面导入两个.js文件，
<script src="../javascripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="../javascripts/ToolTip.js" type="text/javascript"></script>
最后把图片绑定到a标记就可以了：
<a href="<%#DataBinder.Eval(Container.DataItem,"imageBigUrl") %>" class="tooltip">//大图片提示
<asp:ImageButton ID="image1" runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"imageSmallUrl") %>' Width="50px" Height="50px" /></a>
