一个自己的tooltip
生活随笔
收集整理的這篇文章主要介紹了
一个自己的tooltip
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
由于最近看到微博的提示，覺得應該寫一個這樣的東西。以后會用到的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字提示</title>
<!-- 引入jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " type="text/javascript"></script>
<style type="text/css">
*{
margin:0px;
padding:0px;
font-size:12px;
border:none;
}
body{ background: #FFF;}
p{
clear:both;
margin:0px;
padding:10px;
padding-left:100px;
}
a{ border:1px solid #CCC; text-decoration:none; line-height:0px; font-size:0px; padding:10px; display:block; width:50px; }
/* tooltip */
#tooltip{
position:absolute;
display:none;
z-index:1000;
}
#tooltip table{ border-collapse:collapse; height:100%; width:100%; }
#tooltip table tr td{ }
.mid_l{ background: url(images/wraplayer_09.png) repeat-y; width:5px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='images/wraplayer_09.png')}
.mid_r{ background: url(images/wraplayer_09.png) repeat-y; width:5px; _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='images/wraplayer_09.png')}
.mid_c{ background:#fff;}
.bottom_l{ background: url(images/logoNew_nocache.png) no-repeat 0px -5px; width:5px; height:5px; _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='images/bottom-l.png')}
.bottom_c{ background: url(images/wraplayer_09.png) repeat-x; height:5px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='images/wraplayer_09.png') }
.bottom_r{ background: url(images/logoNew_nocache.png) no-repeat -5px -5px; width:5px; height:5px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='images/bottom-r.png') }
.top_l{ background: url(images/logoNew_nocache.png) no-repeat 0px 0px; width:5px; height:5px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='images/top-l.png') }
.top_c{ background: url(images/wraplayer_09.png) repeat-x; height:5px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='images/wraplayer_09.png')}
.top_r{ background: url(images/logoNew_nocache.png) no-repeat -5px 0px; width:5px; height:5px; _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='images/top-r.png')}
.top-angle{ position:absolute; left:20px; width:16px; height:8px;}
.top-angle .topimg{background:url(images/logoNew_nocache.png) no-repeat;_padding-left:11px; _margin-left:-11px; _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='images/logoNew_nocache.png');background-position:-11px 0px; height:100%; width:100%;}
.bottom-angle{ width:16px; height:8px; position:absolute;left:20px; }
.bottom-angle .topimg{background: url(images/bottomangle.gif) no-repeat;height:100%; width:100%; }
.tooltip-cont{ padding:5px; }
.fl{ }
</style>
</head>
<body>
<p >
<a href="#" class="tooltip" title="這是我的超鏈接提示1" name="宣利偉" >
<img src="images/0.jpg" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip" title="這是我的超鏈接提示2" name="點點">
<img src="images/1.png" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip3" title="這是我的超鏈接提示2" >
<img src="images/1(2).jpg" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip" title="這是我的超鏈接提示2" >
<img src="images/1(1).jpg" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip" title="這是我的超鏈接提示2" >
<img src="images/1.png" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip3" title="這是我的超鏈接提示2" >
<img src="images/1(2).jpg" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip" title="這是我的超鏈接提示2" name="" >
<img src="images/1.png" width="50" height="50" /> </a>
</p>
<div id="tooltip">
<table cellpadding="0" cellspacing="0" >
<tr>
<td class="top_l"></td>
<td class="top_c"></td>
<td class="top_r"></td>
</tr>
<tr>
<td class="mid_l"></td>
<td class="mid_c">
<Div class="top-angle" id="top-angle"><div class="topimg"></div> </Div>
<div class="tooltip-cont">
<div class="fl"></div>
</div></td>
<td class="mid_r"></td>
</tr>
<tr>
<td class="bottom_l"></td>
<td class="bottom_c"></td>
<td class="bottom_r"></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//宣利偉 tooltip 插件
//<![CDATA[
(function($) {
var autoclear;//自動執行事件
$.fn.extend({
"tooltip":function(options){
//設置默認值
options=$.extend({
tipwidth:300,//默認寬度
tipheight:100//默認高度
},options);
$(this).mouseenter(function(e){
if(autoclear){//判斷是否有setTimeout事件
clearTimeout(autoclear)
}
this.myTitle = this.title;//文字摘要
var pagetop=$(this).offset().top-$('html').scrollTop();//this相對于屏幕上半部分尺寸
var pagebottom=$(window).height()-pagetop;//this相對于屏幕下半部分尺寸
$("#tooltip").css("width", options.tipwidth)//寬度設定
if(pagetop<=pagebottom){//判斷tip顯示的位置及上下的位置
$("#tooltip").css({
"top": ($(this).offset().top+$(this).outerHeight()) + "px","left": ($(this).offset().left)
+ "px"}).fadeIn("normal");
$("#top-angle").removeClass().addClass('top-angle').css({top:-3})
}
else{
$("#tooltip").css({
"top": ($(this).offset().top-options.tipheight-10) + "px","left": ($(this).offset().left)
+ "px"}).fadeIn("normal");
$("#top-angle").removeClass().addClass('bottom-angle').css({top:options.tipheight+5})
}
$("#tooltip .mid_c").css({"height":options.tipheight+"px"})//tip高度設定
$(".fl").html($(this).html())//圖片獲取
}).mouseleave(function(e){
autoclear=setTimeout(function() {$("#tooltip").fadeOut("fast");},2000);
});
$("#tooltip").mouseenter(function(e){
clearTimeout(autoclear);
}).mouseleave(function(e){
clearTimeout(autoclear);
autoclear=setTimeout(function() {$("#tooltip").hide("fast");},10);
});
return this; //返回this，使方法可鏈。
}
});
})(jQuery);
//初始化不同的tooltip
$(function(){
$("a.tooltip").tooltip();//默認的tip尺寸
$("a.tooltip3").tooltip({tipwidth:400,tipheight:200});//定義不同尺寸的tip
})
//]]>
</script>
</html>
轉載于:https://www.cnblogs.com/xuanliwei/archive/2011/07/01/2095611.html
總結
以上是生活随笔為你收集整理的一个自己的tooltip的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《沧浪之水》推荐
- 下一篇： 管理者的困境：放权或者崩溃