`
knight_black_bob
  • 浏览: 858038 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

漂浮后显示 (不使用 tooltips)

    博客分类:
  • js
阅读更多

 漂浮后显示 (不使用 tooltips)

 



 

 

 

 

 

<td>
					<span class="hd2">概况</span> &nbsp;<span id="messageover" style="height:20px;" class="img-span why"></span>
</td>

<div id="messageovercontent" class="zib whycont">
	 <span style="font-weight:600">+++++:</span><br/>
	 <span >++++++++++</span><br/>
	 <span style="font-weight:600">@@@:</span><br/>
	 <span>@@@@@@@@@@@@@@@@@@@@@@</span><br/>
	 <span style="font-weight:600">###:</span><br/>
	 <span>######################</span>
 </div>

 

 

function getObUpperLeft(obj) {
	var curLeft = curTop = 0;
	if (obj.offsetParent) {
		curLeft = obj.offsetLeft;
		curTop = obj.offsetTop;
		while (obj = obj.offsetParent) {
			curLeft += obj.offsetLeft;
			curTop += obj.offsetTop;
		}
	}
	return [ curLeft, curTop ];
}


 $("#messageover").hover(function(){
				   var off = getObUpperLeft(this);
	               var x = off[0] + this.offsetWidth - 25;
	               var y = off[1] - 8;
	               
				   $("#messageovercontent").css({
					   top:y,
					   left:x
				   });
				   $("#messageovercontent").show();
			   },
			   function(){
				   $("#messageovercontent").hide();
			   });

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

捐助开发者

在兴趣的驱动下,写一个免费的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(右上角的爱心标志,支持支付宝和PayPal捐助),没钱捧个人场,谢谢各位。



 
 
 谢谢您的赞助,我会做的更好!

 

 

  • 大小: 6.6 KB
分享到:
评论

相关推荐

    ToolTips

    5. `toolTip1.InitialDelay`属性用于设置鼠标悬停后显示ToolTip的延迟时间。 6. 如果需要同时为多个控件设置ToolTip,可以使用`toolTip1.SetToolTip(this, "这里是窗体的说明");` 在Web开发中,JavaScript库如...

    CSS3 Tooltips

    在网页设计中,Tooltips是一种常见的交互元素,它会在鼠标悬停时显示额外的信息或提示。CSS3的引入为Tooltips的设计带来了更多可能性,让我们能够创建出更加美观、动态且自定义化的Tooltips。本教程将深入探讨CSS3在...

    MFC开发ToolTips方法

    ToolTips是一种小型弹出窗口,当用户将鼠标指针停留在不明显或功能复杂的控件上时,会显示简短的说明性文本。它们提高了用户界面的可用性,因为它们能帮助用户理解未知控件的作用。 2. **创建MFC应用项目** 首先...

    非常酷人性化的提示Tooltips

    例如,使用`position: absolute`和`z-index`来定位Tooltips,`transition`或`animation`来添加平滑的显示和隐藏效果。 4. `Js`: 这个目录可能包含一个JavaScript文件,用于处理Tooltips的动态行为。例如,当鼠标...

    ToolTips_demo源码

    【标题】"ToolTips_demo源码"是一个C++编程示例,主要展示了如何在应用程序中实现ToolTip功能。ToolTip是用户界面中的一个常见元素,当鼠标悬停在某个控件上时,它会显示提供额外信息的小提示窗口。这个源码项目可以...

    jQuery工具提示插件zebra_tooltips

    2. **初始化插件**:在页面加载完成后,通过`$.fn.zebra_tooltips()`方法激活插件,可以指定各种配置选项。 ```javascript $(document).ready(function() { $('.tooltip').zebra_tooltips({ position: 'top', //...

    tooltips提示工具

    当用户对某个图标、按钮或其他控件的作用不确定时,只需将鼠标光标悬停在该元素上,`tooltip`会立即显示相关信息,无需用户进行任何其他操作。这种即时反馈有助于提高用户的理解和操作效率。 在网页开发中,`...

    tooltips js脚本代码

    在网页设计中,Tooltips经常用于解释复杂的图标、链接或按钮的功能,避免用户因为不清楚元素的含义而感到困惑。 总结来说,`tooltips js脚本代码`是一个用于创建动态Tooltips效果的JavaScript库,它结合`prototype....

    鼠标跟随tooltips提示源代码

    javascript代码"揭示了实现这一功能的两个关键部分:HTML用于构建页面结构和内容,而JavaScript(可能是与jQuery库结合使用)则负责添加动态行为,如跟踪鼠标位置并显示tooltips。 在HTML部分,开发者通常会为需要...

    ToolTips_src源码

    此外,还能深入理解MFC库的使用,包括如何创建和管理对话框,以及如何处理Windows消息。对于初学者,这是一个很好的实践项目,可以提升对C++ GUI编程的理解。而对于经验丰富的开发者,这可能是探索更高效或者自定义...

    Flex3--Tooltips工具提示教程

    ToolTips 简介 1 创建ToolTips 2 设置ToolTip风格 4 设置ToolTips宽度 6 ToolTip事件的使用 7 同NavBar控件使用ToolTips 8 使用ToolTip 管理器 9 激活和停止ToolTips 9 设置显示延迟时间 10...

    AngularJs Tooltips

    本篇文章实现功能可以随意实现tooltip,把tooltips封装成angularjs中的指令,方便使用,参照https://github.com/shu-frank-csdn/angular-tooltips

    Android-一个简单的基于PopupWindow的Tooltips库

    3. **定位PopupWindow**:决定Tooltips在屏幕上的显示位置,通常与某个触发元素关联。可以使用`showAsDropDown()`或`showAtLocation()`方法来实现。例如: ```java View anchorView = findViewById(R.id.anchor_...

    jQuery Tooltips悬停文字提示框效果.zip

    jQuery Tooltips是一个强大的JavaScript库,它为网页中的元素提供了优雅的文字提示框效果。这个插件是基于jQuery构建的,能够帮助开发者轻松实现信息提示功能,为用户交互增加更多层次和便利性。在“jQuery Tooltips...

    工具提示(TOOLTIPS)

    在编程领域,工具提示(ToolTips)是一种常见的用户界面元素,它为用户提供额外的信息,当鼠标悬停在某个控件上时,会显示一个小窗口显示该控件的简短描述或指南。在C#编程中,实现工具提示功能是相当直观的,这使得...

    HTML5tooltips.zip

    中,可能包含的不仅仅是一个"tooltip.js"文件,通常还会有一个CSS文件用于定义tooltip的样式。这可能涉及到颜色、字体、阴影等视觉效果。比如,这个工具可能内置了暗色和亮色两种主题,用户可以根据网站的整体风格...

    纯js轻量级tooltips工具提示插件

    html5tooltipsjs是一款使用纯javacript编写的轻量级tooltips工具提示插件。该tooltips插件不依赖任何框架,内容可带HTML标签,并可以使用预设的CSS3动画来制作tooltips动画效果。

    html5tooltips.js

    自定义的html5tooltips.js文件,实现高度自定义的气泡弹出窗口

    echarts3.0-radar-tooltips单轴数据显示

    echarts3.0-radar-tooltips单轴数据显示

    vc listctrl tooltips

    `Tooltips` 则是提供额外信息的小型文本框,当鼠标悬停在某个元素上时,它会自动显示。将 `ListCtrl` 与 `Tooltips` 结合,可以为列表中的每一项添加详细说明,提升用户体验。 `ListCtrl` 的 `Tooltips` 实现主要...

Global site tag (gtag.js) - Google Analytics