一个自己的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>

<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="data:images/0.jpg" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip" title="这是我的超链接提示2" name="点点">
<img src="data:images/1.png" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip3" title="这是我的超链接提示2" >
<img src="data:images/1(2).jpg" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip" title="这是我的超链接提示2" >
<img src="data:images/1(1).jpg" width="50" height="50" /> </a>
</p>
<p>
<a href="#" class="tooltip" title="这是我的超链接提示2" >
<img src="data:images/1.png" width="50" height="50" /> </a>
</p>

</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相关推荐

Qt自定义一个简单的ToolTip提示框
实现过程因为 QToolTip 自定义样式不大方便,而且半透明也没法设置,所以需要自定义.而且,Qt 中的顶层 widget 好像默认是不支持透明样式的,可以设置: setWindowFlags(Q ...
react 组件怎么公用_用 react 做一个跟随组件的 tooltip
定位的难题你可能听说国很多关于定位型组件种类.名词:popup, tooltip, popover, overlay...(后面将统称为 overlay).这些都是定位型组件,当你需要触发显示它们的 ...
【bootstrap教程】Bootstrap 工具提示（Tooltip）插件
文章转载自 [http://www.php230.com] 链接地址 Bootstrap 工具提示(Tooltip)插件当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示 ...
[WTL/ATL]_[初级]_[TreeView控件如何显示ToolTip]
场景在开发界面程序时,CTreeViewCtrl(它实际内部封装的就是Win32的TreeView控件)一般会用来作为选择某些类型的树形菜单,点击某项的时候,右边能显示某些对应的数据.当这个控件的宽 ...
BootStrap-CSS样式_插件_工具提示（Tooltip）插件
工具提示(Tooltip)插件当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启 ...
为开发者准备的15 款Tooltip工具提示jQuery插件
http://www.admin10000.com/document/2332.html tooltip或者infotip或者hint,是一种常见的图形用户界面元素.它用于连同一个光标,通常是一个鼠标 ...
提示冒泡Tooltip
提示冒泡Tooltip 开发工具与关键技术:Visual Studio 前端作者:盘子撰写时间:2019年6 月8日 Tooltip的意思为工具提示.提示信息.提示框或者是提示文本,在这里我们就称 ...
微软图表控件MsChart
转自:http://tech.ddvip.com/2008-11/122640479791375.html 昨天在网上看到了微软发布了.NET 3.5框架下的图表控件,第一时间抓下来看了一下,发觉功能 ...
【译】CSS动画 vs JS动画
原文地址目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...

一个自己的tooltip

一个自己的tooltip相关推荐

最新文章

热门文章