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：使用數據屬性