textbox提示文字属性_纯CSS实现文字气泡提示效果

今天来看看，如何只通过CSS实现下面这样的文字气泡提示效果。

核心点：

data-* 属性，HTML5规范允许我们使用 data-* 属性来嵌入自定义数据。

attr() 函数，attr()函数通常配合content属性使用，可以返回选择元素的属性值。

完整代码：

html代码

请你打开电视看看 多少人为生命在努力勇敢的走下去。—— 周杰伦

css代码

.text {  font-size: 16px;  margin-top: 300px;  text-align: center;}.tooltip {  position: relative;  font-size: 14px;  cursor: default;}.tooltip::before {  content: attr(data-tip); /* 注意data-tip不加引号 */  position: absolute;  top: -37px;  left: 50%;  transform: translatex(-50%);  display: none;  padding: 4px 8px;  background-color: #303133;  color: #fff;  font-size: 12px;  white-space: nowrap; /* 防止父元素宽度不够，文字换行 */  border-radius: 4px;}.tooltip::after {  content: '';  position: absolute;  top: -18px;  left: 50%;  transform: translatex(-50%) rotate(45deg);  display: none;  width: 10px;  height: 10px;  background-color: #303133;  border-radius: 2px;}.tooltip:hover::before,.tooltip:hover::after {  display: block;}