文章来自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组件足够简洁，可以很方便的插入到HTML中，不改变或尽量少地改变原内容。基于这种需求，可以给出以下两个解决步骤：

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

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

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

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

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

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

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

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

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