【HUI】Tooltip(提醒组件)――2.Tooltip in CSS2(优化方案)

【HUI】Tooltip(提示组件)――2.Tooltip in CSS2(优化方案)

文章来自LearnShare，转载请注明。

本文是【HUI】Tooltip(提示组件) 系列文章之一，请关注本系列的 更新。

末日前的 【HUI】Tooltip(提示组件)[demo0] 这篇文章讲到了使用css2制作Tooltip的提示气泡，气泡使用了如下的HTML结构：

<div class="tooltip">
	<div class="tt-c">content</div>
	<div class="tt-a"></div>
</div>

这段代码对于Tooltip组件来说是过于复杂的，所以我们在本文中研究另一种优化的结构。

在实际的应用中，我们希望Tooltip组件足够简洁，可以很方便的插入到HTML中，不改变或尽量少地改变原内容。基于这种需求，可以给出以下两个解决步骤：

Step1. 简化Tooltip组件的HTML结构；

Step2. 将Tooltip组件的消息记录到原HTML Tag中，通过JavaScript解析并插入Tooltip组件中。

（本文和下一篇文章将从 步骤1 展开，步骤2 将在系列文章的第x篇中展现。）

本篇文章的目的是：找到一种简化Tooltip组件HTML结构的方法。

我们首先来分析一下Tooltip组件的各个要素：

1.提示气泡 用来展现Tooltip消息（气泡的尾巴――三角形，是可选的结构）；

2.提示消息 Tooltip组件需要呈现出来的内容（文本为主，可以是任何内容）；

3.父元素 需要呈现Tooltip的HTML元素；

由此可简化出如下的HTML结构：

<p class="hui-tooltip">
	parent tag's content
	<span>tip text</span>
</p>

其中，

• <p class="hui-tooltip">...</p> 是需要呈现Tooltip的父元素，class 属性是给CSS解析使用的；
• parent tag's content 是父元素的内容。通常的情况是：当鼠标指向该文字的时候，Tooltip就会呈现出来；
• <span>...</span> 是Tooltip组件的气泡；
• tip text 是Tooltip的提示文本。

应用了样式之后，效果如下（限于文章长度，代码省略）：

Tooltip气泡显示在了父元素文本之后，我们需要对它进行重新定位。

首先，设置父元素为相对定位，使其子元素（包括Tooltip）相对于父元素的位置定位：

.hui-tooltip{
	position:relative;
}

然后，设置Tooltip为绝对定位，使其脱离父元素而浮动：

.hui-tooltip span{
	position:absolute;
}

设置Tooltip的位置，使其位于父元素文字之上并居中（尺寸通过开发工具测出）：

.hui-tooltip span{
	left:20px;
	top:-50px;
}

实现的效果如下：

下一篇文章中，我们将添加几行样式，实现Tooltip的鼠标hover响应效果。

文章来自LearnShare，转载请注明。