大家在网页上会经常看到某些图标或文字，当鼠标悬停后会在四周某个位置出现一个简短的文字提示，这种提示分为两种，一种是提示固定的文字，例如放在qq图标上，会显示固定的文字“QQ”；第二种是显示鼠标所在标签的完整文字叙述，例如放在标签：“床前明月光，疑是...”，鼠标悬停后会显示完整诗句：“床前明月光，疑是地上霜”。本文就来讲述如何实现上述两种提示方法。
一、提示固定词语
这种提示因为是固定提示词，所以比较简单，使用伪类+伪元素来实现即可，代码如下：
悬停出现提示词
结果如图所示：
二、提示词为标签内文字
第一种方法：和上述提示固定文字做法相同，只需要将伪元素里的content设置为标签内内容就行。
该方法优点是使用比较方便，缺点是只能提示固定词语。
第二种方法：只需要略微修改上方代码就行，代码如下(注释部分为发生变化的地方)
悬停出现提示词
该方法缺点是需要自定义一个属性并且在框架中，不同组件中的标签都需要单独写一个，优点是：可以在提示框中提示任意提示词，也可适用于vue，react等框架。
为了优化上述方法，大家也可以自行封装一个鼠标悬停后提示相应词的组件来优化代码。