Code

简单Tip效果。
根据元素的title属性生成tip。
效果预览
代码
1.在body里加入如下HTML代码:

<div id="imglist">
    <img src="images/tipimg1.jpg" title="百搭可爱卫衣" />
    <img src="images/tipimg2.jpg" title="冬季保暖手套" />
    <img src="images/tipimg3.jpg" title="必备保暖内衣" />
    <img src="images/tipimg4.jpg" title="羊毛绒针织裙" />
    <img src="images/tipimg5.jpg" title="爆款毛绒冬靴" />
</div>

2.在head标签内加入css文件:

<style type="text/css">
.tooltip {
    display:none;
    background-color:#ffa;
    border:1px solid #cc9;
    padding:3px;
    font-size:12px;
    color:#464646;
    -moz-box-shadow: 2px 2px 11px #666;
    -webkit-box-shadow: 2px 2px 11px #666;   
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#555555', Direction=125, Strength=4); /*for ie6,7,8*/
}
</style>

3.在head里引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquerytoolstip.js" type="text/javascript"></script>

4.继续在head里加入js代码:

<!--横向滚动的js-->
<script type="text/javascript">
    $(function() {
        $("#imglist img[title]").tooltip({
        
            //tip的位置
            position: "bottom right",
            
            //tip的偏移
            offset: [-30, -30]
        });
    })
</script>