Hint.css - ぷちWiki

最終更新日時：2017-02-09 19:32:50

Hint.css はいわゆるツールチップを表示するための CSS です。
JavaScript 不要で CSS のみ。
使い方も超簡単なので、ツールチップを表示したい時にはこれでほぼ決まりでしょ～

公式サイトはこちら。
Hint.css

上記からダウンロードすることも出来ます。
使い方はサンプルさえあれば説明不要だと思うので、サンプルだけ一通り作成しておきました(^_^;
ほとんど、オリジナルからのコピペですが(/_＼*)

Hint.css のサンプル

ツールチップ内の改行

オリジナルのままだとツールチップ内には改行を入れられません。
バージョン 2.4.1 の例ですが、以下の指定を追加すると改行を入れられるようになります。

 diff hint.css-2.4.1/hint.css hint.css-2.4.1-fixed/hint.css
 72a73
 >     white-space: pre;

改行文字は、"
" です。