CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。

<a class="dui-tips" data-tooltip="私は 3cbest.com のヒントです">w3cbest.com</a>

.dui-ヒント {
位置: 相対的;
表示: インラインブロック;
カーソル: ポインタ;
}
 
.dui-tips[データツールチップ]:after、
.dui-tips[データツールチップ]:before {
可視性: 非表示;
位置: 絶対;
上位: 50%;
左: 100%;
遷移: すべて .3;
}
 
.dui-tips[データツールチップ]:after {
 
コンテンツ: attr(データツールチップ);
変換: translate(-5px, -50%);
空白: 前;
パディング: 5px 10px;
背景色: rgba(0, 0, 0, 0);
色: rgba(255, 255, 255, 0);
}
 
.dui-tips[データツールチップ]:before {
コンテンツ： '';
高さ: 0;
幅: 0;
変換: translate(-10px, -50%);
境界線の幅: 5px 5px 5px 0;
境界線のスタイル: solid;
境界線の色: 透明 rgba(0, 0, 0, 0) 透明 透明;
}
.dui-tips:hover:after、.dui-tips:hover:before {
遷移: すべて .3;
可視性: 可視;
 
}
.dui-tips:hover:after {
色: rgba(255, 255, 255, 1);
背景色: rgba(0, 0, 0, 0.8);
変換: translate(5px, -50%);
}
 
.dui-tips:hover:before {
境界線の色: 透明 rgba(0, 0, 0, 0.8) 透明 透明;
変換: translate(0px, -50%);
}