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>
"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>
浙公网安备 33010602011771号