jquery‘s tooltip

我需要做一个tooltip, html默认的 title="..."不能满足要求， 所以从网上找了一个开源的组件，用图层来显示 tip

http://flowplayer.org/tools/tooltip/index.html 

写了个简单的例子，还比较好用，它是将title里的内容放在隐藏的图层里，当 mouseover 事件触发时显示隐藏的图层

具体代码示例如下

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< style  type ="text/css"  media ="all" >
@import "style/jquery.css";
@import "style/jquery.ui.css";
@import "style/ui-lightness/jquery-ui-1.8.6.custom.css";
</ style >

< script  type ="text/javascript"  src ="script/jquery-1.4.4.js" ></ script >
< script  type ="text/javascript"  src ="script/jquery.tools.min.js"   ></ script >

< style  style ="text/css" >
.linkUl  { line-height : 32px ; }
.smallTip,.largeTip  {
    display : none ;
    background-color : #FFFFE1 ;
    color : #666666 ;
    border : 1px solid #eeeeee ;
    font-family :  Verdana, Arial,sans-serif ;  
    font-size : 12px ;
    line-height : 24px ;
    color : #666666 ;
    padding : 12px ;
    vertical-align : top ;
    text-align : left ;
    padding : 2px 2px ;
}
.smallTip,.largeTip table {
    pading : 6px ;
}
.smallTip,.largeTip table thead {
        background-color : #E9EEF4 ;
}
.smallTip,.largeTip table tbody {
        background-color : #ffffff ;
}
.smallTip {
    height : 50px ;
    width : 120px ;
}
.largeTip {
    height : 100px ;
    width : 320px ;

}
</ style >
< script  type ="text/javascript" >
$(document).ready( function (){
    $( " a:eq(0) " ).tooltip({
        position:  " center right " ,
        offset: [ - 5 ,  - 25 ],
        effect:  " fade " ,
        opacity:  1 ,
        tipClass: " smallTip "
    });
    $( " a:gt(0) " ).tooltip({
        position:  " center right " ,
        offset: [ - 5 ,  - 25 ],
        effect:  " fade " ,
        opacity:  1 ,
        tipClass: " largeTip "
    });
});
</ script >
  
</ head >
< body >
< ul  class ="linkUl" >
< li >< a  href ="http://jquery.com"  title ="Write less, do more" > jQuery.com </ a >
< li >< a  href ="http://learningjquery.com"  title ="<table width='100%' cellspacing='2' cellpadding='2'>
<thead><tr><td>More sites</td></tr></thead>
<tbody><tr><td>* http://jqfundamentals.com/book/index.html</td></tr>
<tr><td>* http://jquery-mix.com</td></tr>
</tbody></table>" > learningjQuery.com </ a >
< li >< a  href ="http://jquery-mix.com/"  title ="Write less, do more" > jQuery-mix.com </ a >  
< li >< a  href ="http://jqueryfordesigners.com/"  title ="Write less, do more" > jqueryfordesigners.com </ a >   
< li >< a  href ="http://15daysofjquery.com/"  title ="Write less, do more" > 15daysofjquery.com </ a >   
< li >< a  href ="http://www.jquery4u.com/"  title ="Write less, do more" > jquery4u.com </ a >   
< li >< a  href ="http://www.jqueryking.com/"  title ="Write less, do more" > jqueryking.com </ a >   
< li >< a  href ="http://jqfundamentals.com/book/index.html"  title ="Write less, do more" > jqfundamentals.com </ a >   
< li >< a  href ="http://jquery-howto.blogspot.com/"  title ="Write less, do more" > jquery-howto.blogspot.com </ a >   
</ ul >
</ body >
</ html >

转载于:https://www.cnblogs.com/walterfan/archive/2011/03/31/2000518.html