制作半透明的tooltip 无非就是2个div重叠实现的,下面的例子如下:
<html>
<head>
<meta charset="UTF-8" />
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="tooltip.css" type="text/css" media="screen">
<script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(function(){
var hideDelay = 500;
var currentID;
var hideTimer = null;
var container = $('<div class="chart-panel">' +
'<div class="chart-spanBG"></div>' +
'<div class="chart-span">' +
'<div class="container"></div>' +
'</div>' +
'</div>');
$('body').append(container);
$('.popupTrigger').live('mouseover', function(){
if (hideTimer)
clearTimeout(hideTimer);
var pos = $(this).offset();
var width = $(this).width();
container.css({
left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
$('.container').html("<H5>WWWWWWWWWWWWWWWWWWWW</H5>");
container.css('display', 'block');
});
$('.popupTrigger').live('mouseout', function(){
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function(){
container.css('display', 'none');
}, hideDelay);
});
// Allow mouse over of details without hiding details
$('#container').mouseover(function(){
if (hideTimer)
clearTimeout(hideTimer);
});
// Hide after mouseout
$('#container').mouseout(function(){
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function(){
container.css('display', 'none');
}, hideDelay);
});
});
</script>
</head>
<body bgcolor="pink">
<a class="popupTrigger">House, Devon</a>
</body>
</html>
css的内容如下:
.chart-panel {
Z-INDEX: 99999;
LEFT: 0%;
MARGIN-LEFT: 0px;
ZOOM: 1;
POSITION: absolute;
TOP: 20%;
Display: none
}
.chart-spanBG {
background-color: #FFFFCC;
POSITION: absolute;
FILTER: alpha(opacity:50);
opacity: 0.50;
width: 100%;
height: 100%
}
.chart-span {
width: auto;
height: auto;
margin: auto;
POSITION: relative
}
.chart-panel .container {
Z-INDEX: 2;
BORDER-RIGHT: #999 1px solid;
BORDER-TOP: #999 1px solid;
MARGIN: 0px;
OVERFLOW: hidden;
BORDER-LEFT: #999 1px solid;
BORDER-BOTTOM: #999 1px solid;
POSITION: relative
}
.chart-panel H5 {
FONT-WEIGHT: normal;
font-size: 10px;
margin-left: 5px;
margin-right: 5px;
white-space: nowrap;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000
}
分享到:
相关推荐
easyui利用tooltip实现title功能
jQuery实例_ ToolTip的实现
DataGrid实现tooltip功能DataGrid实现tooltip功能.txtDataGrid实现tooltip功能.txtDataGrid实现tooltip功能.txtDataGrid实现tooltip功能.txtDataGrid实现tooltip功能.txt
Qt5+VS2015环境下,模拟Qt的ToolTip功能,实现更加完整的tip显示效果,如同QQ上,鼠标停留在好友QQ头像出现浮窗显示好友更多资料
用ToolTip实现在文本框中输入数据时给予提示.rar
angularJS实现的tooltip效果,亲测有效........................
一个ajax的tooltip例子,一个ajax的tooltip例子
一个实现IExtenderProvider接口的小例子,就像tooltip能给所有的控件添加上一个属性在tooltip1上的tip这样的一个属性
微信小程序-ToolTip信息提示组件导入将ToolTip文件夹复制到pages文件夹内使用在需要使用ToolTip的页面对应的.wxml文件中添加: src="../ToolTip/toolTip.wxml"/> <!-- 引入toolTip模板 --> is=...
基于 Vue 的简单 tooltip 工具
实现SVG图片元素Tooltip功能,详情请阅读本人博客一篇关于SVG Tooltip的博文
这是一个有关ToolTip的超级类,可以实现各种类型的ToolTip的弹出,并且该代码适应性极强,适应面也很广。
一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的...
做项目的时候为了美观,将下拉菜单、文本框等做成统一的大小,这样当里面内容长的时候不能显示出来,用了这个类后,当你鼠标移到相应的行,会以tooltip的形式显示出整行,使用也非常简单,添加引用,直接使用就可以 ...
一个简单的基于纯js实现的Tooltip 带有Images及Text显示。
给HTML元素添加Title虽然也可实现tooltip,但是局限性太大,换行、添加图片等都比较麻烦,并且如果tooltip太长,可能等不到浏览者看完就消失了。这个示例解决了上诉问题!
该资源包的执行效果查看地址:https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“46.(cesium篇)cesium实现信息提示tooltip”。如下载有问题,可联系博主。 解压密码:cesium
1.声明一实例变量 nvo_ToolTip ToolTip 2.在需要此服务的对象的构造事件中加入 ToolTip.AddTool(this, string(this.tag), 0) 3.在对象的MouseMove事件中加入ToolTip.RelayMsg(This) 4.把要显示的ToolTips文本...
一个简单的Tooltip类 方便在控件中添加
jQuery提示信息插件tooltip实现图片多点鼠标滑过信息提示效果.zip