CSS使用自定义属性显示提示文字

实际开发场景中需要自定义鼠标悬停显示提示文字效果，使用操作DOM虽然能实现需求，但不是最优方案。其实，可以使用CSS的attr属性来实现，不需要额外的DOM操作代码

例如页面HTML结构如下：

	<div class="text-container">
      <p class="article" data-tip="提示内容：CSS实现效果">CSS自定义提示信息p>
    div>

CSS代码如下：

	article::before {
	  content: attr(data-tip);
	  display: block;
	}

也可以使用CSS的属性选择器选择自定义属性进行其他处理

	<div class="text-container">
      <p class="article" data-columns="3">CSS自定义提示信息p>
      <p class="article" data-columns="4">CSS自定义提示信息p>
    div>

	article[data-columns='3'] {
	  width: 400px;
	}
	article[data-columns='4'] {
	  width: 600px;
	}

参考资料：MDN：使用数据属性