简易tooltip实现

最新推荐文章于 2024-11-27 15:52:44 发布

iteye_4865

最新推荐文章于 2024-11-27 15:52:44 发布

阅读量470

点赞数

分类专栏： ui 文章标签： IE CSS 脚本 Chrome EXT

ui 专栏收录该内容

12 篇文章

订阅专栏

曾经实现过比较复杂的tooltip：

TipLite 轻量级的Ext 提示

在 positioniseverything 的一篇文章中提到了很简单的实现，依赖于绝对定位后的不设置css位置属性（left,right,top,bottom）的元素保留在其为定位前的位置，并且同时该绝对定位元素和周围元素不同层，然后利用元素绝对定位后自动为 block 的特性，设置margin-top,margin-left移动元素位置，对付一般的效果完全游刃有余，且远离复杂脚本，简单情况下利用a具有天然的跨平台性，但是作者对于margin移动的具体解释不很清楚，我在本文后进一步分析。

扩充效果演示：

可以设置 a 为 block即可脱离只能设置行内tooltip的限制 (chrome嵌套规则要求严格)使用div伪状态hover（ie6脚本修正），可在整个容器内设置tooltip，以及对tooltip进一步进行布局。

演示@google code

步鄹：

1.准备页面标签

	<p>
			很简单的tooltip,<div id="s" class="tool" href="#">掠过我<div class="tooltip">
<div class="title">我是标题</div><div class="content">我是具体内容,我是具体内容</div>
</div></div>就知道了
		</p>

.tooltip即为提示内容

2.初始css

利用margin设置tooltip相对位置，隐藏tooltip（拉出屏幕外）

.tooltip {
			background:none repeat scroll 0 0 #444466;
			border:1px solid white;
			color:white;
			font-weight:bold;
			left:-999em;
			width:150px;
			padding:2px 4px;
			position:absolute;
			text-decoration:none;
			margin-top:0.5em;
			margin-left:-1em;  
/*非ie浏览器,块状元素会换行！*/
			display:inline;
			/*
			display:inline-block;
			ie inline-block ...
			*zoom:1;
			*display:inline;*/			
		}
.tooltip .title {
				font-size:1.5em;
				text-align:center;
			}
			.tooltip .content {
				padding:5px;
			}

3.hover处理

将tooltip拉过来即可。保留默认auto，即保留原先渲染引擎计算的位置。

.tool:hover .tooltip {
				left:auto;
				
			}

优略：

1。脱离复杂脚本(ie6需脚本修正hover)，全浏览器兼容性，比title更具表现力。

2。但未考虑鼠标移动，与原生title尚有差异。

margin移动位置问题

对于原文后分析为什么要设置负margin-left而不是正margin-right使得元素左移，我与原文作者有不同的理解：

渲染引擎在布局元素时，是把元素的margin-border-padding-width/height结合起来考虑的，元素的占用渲染页面区域计算为：

margin+padding+width/height+border

然后将元素放入占用区域内，margin外边和占用区域外边对其。

当margin为负时，实际上计算可得元素占用区域小于width/height+border+padding，则margin外边向内塌陷，使得margin外边在border里面，而另一方面margin外边仍要和引擎计算的占用区域外边对其，则导致border位置向外移动，造成元素移动的效果，实际上对于元素整体来说，其并没有移动，占用区域比border区域还要小，这就造成了border区域移动后实践上会侵占其他元素的渲染占用区域而造成了重叠的效果。

图示：

则引擎从左到右，从上到下，根据各个元素的计算占用渲染区域排列各自的位置，当设置负的margin-left时，margin-left外边实际上处于border右边，由于margin-left外边要和元素占用渲染区域做外边对其，则看起来造成border比其设置正margin或0margin时的左移的效果，而设置负或正的margin-right，由于渲染引擎由左到右排列的特性，对于元素实际位置则不会产生影响。

ps:OReilly.CSS.The.Definitive.Guide 中在 float一章中也提到了这个问题：

The CSS1 and CSS2 specifications explicitly state that user agents are not required to reflow previous content to accommodate things that happen later in the document. In other words, if an image is floated up into a previous paragraph, it may simply overwrite whatever was already there.