首先需要引入jQuery
1.官网jquery压缩版引用地址:
　3.1.1版本:

　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

3.0.0版本:

　　<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

　2.1.4版本:

　　<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

2.百度压缩版引用地址:

　　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

3.微软压缩版引用地址:

　　<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

亲测都可用,谷歌的不太好用,便不再加进去.

.show_tooltip li {
 list-style:none;
 display:inline;
 padding:5px 5px 5px 5px;
}
/* tooltip */
#tooltip{
 position:absolute;
 border:1px solid #333;
 background:#f7f5d1;
 padding:3px 3px 3px 3px;
 color:#333;
 display:none;
}

用到的JavaScript：

<script type="text/javascript">
$(function(){
 var x = 10;
 var y = 20;
 $("a.tooltip").mouseover(function(e){
  this.myTitle = this.title;
  this.title = ""; 
  var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
  var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='预览图'/>"+imgTitle+"<\/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"
   });
 });
})
</script>

调用实例：

<ul class="show_tooltip">
  <li><a href="image/slide1.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide1.png" width="150" alt="化无语 战场原黑仪"></a></li>
  <li><a href="image/slide2.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide2.png" alt="化无语 战场原黑仪" width="150"></a>
</li>
  <li><a href="image/slide3.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide3.png" width="150" alt="化无语 战场原黑仪"></a></li>
</ul>

效果图：