`
yiminghe
  • 浏览: 1466218 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

简易tooltip实现

    博客分类:
  • ui
阅读更多

曾经实现过比较复杂的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.

 

 

  • 大小: 33.1 KB
  • 大小: 21.4 KB
0
0
分享到:
评论

相关推荐

    jquery Tooltip简易文本提示框插件

    jQuery Tooltip插件通过监听元素的鼠标事件,实现动态显示和隐藏提示内容。它不仅提供了基础的文本提示,还可以包含HTML内容、图片等,增强了网页的可视化效果。 二、安装与引入 要使用jQuery Tooltip,首先确保已...

    TooltipView简易的应用提示控件.rar

    这个名为"TooltipView简易的应用提示控件.rar"的压缩包包含了一个实现TooltipView功能的自定义控件。开发者可能在设计应用时遇到需要为按钮、图标或其他UI元素添加动态提示的需求,这时候,TooltipView就可以派上...

    Qt简易多文档编辑器

    下面讲的主要是一个个简单功能的逐步实现过程的某些细节。  界面的设计:  在action编辑器中,Text栏中输入文字内容,如果有快捷方式,也最好用括号将其注释起来 ;Object Name中输入目标名字,最好采用默认的...

    简易boostrap响应式网页.rar

    它包含了jQuery库(Bootstrap依赖jQuery)以及一系列插件,如模态框(Modal)、下拉菜单(Dropdown)、滚动监听(ScrollSpy)、提示(Tooltip)和弹出框(Popover)。例如,`打开模态框&lt;/button&gt;`,这个按钮将触发一...

    Android Gradle用户指南

    - **多版本构建简易性:**无论是针对不同市场发布的多个APK版本,还是同一应用的不同定制版本,Gradle都让这些操作变得更为简便。 - **高度可配置性:**提供易于配置、扩展和定制的构建流程,以满足不同项目的需求...

    bootstrap后端模板

    5. **JavaScript组件**:Bootstrap 模板通常会集成其JavaScript插件,例如模态框(Modal)、下拉菜单(Dropdown)、滚动监听(ScrollSpy)、工具提示(Tooltip)和弹出框(Popover)等。这些组件可以提升用户体验,...

    基于bootstrap的简单 后台管理 系统

    5. **JavaScript插件**:如轮播图、 collapse(折叠)、tab(选项卡)和tooltip(提示框)等,增强了用户交互性。 6. **定制化**:Bootstrap允许开发者根据项目需求定制主题,通过修改LESS变量或使用在线工具,轻松...

    wpf制作记事本代码

    本项目旨在通过使用WPF技术来实现一个简易记事本应用,目的是让用户更加深入地理解WPF的各种特性及其在实际项目中的应用方法。该记事本具备基本的文字编辑功能,并通过简单的菜单、工具栏等控件实现了基本的文件操作...

    ALV属性大全[收集].pdf

    ALV家族还包括简易ALV、两层ALV、分等级连续的列表以及树形结构的ALV,以满足不同层次的显示需求。 ALV Grid实例的定义基于CL_GUI_ALV_GRID类,通过创建该类的引用来实例化ALV。实例化的ALV Grid可以根据需要调整其...

    百度Echarts插件及模板介绍

    使用Echarts可以轻松地通过简单的配置实现各种各样的图表,如折线图、柱状图、饼图、散点图、热力图等等。Echarts还支持3D图表的绘制,以及多种数据格式和动态交互功能。对大数据的展示和分析具有重要意义,使得复杂...

    ALV详解_SAP精华篇

    ALV家族主要包括三种类型的ALV工具:简易型、两层ALV、分级连续列表及树形结构的ALV。 #### 二、ALV Grid Control (ALV网格控制器) ALV Grid Control采用了控制器技术以实现高质量的屏幕展示效果。与其他控制器...

    open-flash-chart中文使用参数对照表

    Open Flash Chart(简称 OFC)是一款基于 Flash 的图表绘制工具,以其强大的图表功能和简易的操作方式,在 Web 应用开发中得到了广泛的应用。它支持多种图表类型,如折线图、柱状图、饼图等,并且可以通过丰富的配置...

    ALV详细文档

    ALV家族成员包括简易ALV、两层ALV以及分级连续列表和树状ALV,满足不同场景下的数据展示需求。 #### 二、ALV_GRID CONTROL机制 ALV_GRID CONTROL运用控制器技术,确保屏幕显示的艺术性和功能性。类似于其他控制器...

Global site tag (gtag.js) - Google Analytics