super simple css tooltips

超シンプルなCSSツールチップ

ツールチップホバーを要素に簡単に追加できます。ツールチップホバーは、要素の左、右、または底部に配置できます。 2番目の底部オプションにはポインターが含まれています。

CSSクラス

• tooltip--left
• tooltip--right
• tooltip--bottom
• tooltip--triangle

使用法

CSSはtooltip--*クラスを使用し、要素上のdata-tooltip属性属性を使用してツールチップテキストを提供します。

[ class ^= "tooltip" ] {
  ...
  content : attr ( data-tooltip );
  ...
}

 < img href =" /img/info.svg " class =" tooltip--left " data-tooltip =" This is the text displayed " >

サポート

Chrome、Firefox、Safari、Edge、およびIE10+の現在のバージョン。