マウスオーバーでポップアップを表示するHint.css の使い方。
自作ツールが高機能すぎてページがいっぱいいっぱい。例えばこういうの。
もういっぱいいっぱいで2段になってしまった。ページの横スクロールは効率が悪いのでこんな感じ。
これはワードプレスをボタン一つでインストールするツールで、インストールだけでなく管理もできる優れもの。
管理上、そのワードプレスがどのテーマをつかっているかとかフォルダーのパーミッションだとかもわかるようになっている。
けど、それを常時表示しておくのはさらに表示場所が必要になるわけだ。
そこで、マウスオーバーでポップアップさせて表示させようと思ってツールをさがしてみた。
※クリックでウィンドが出るタイプだといちいちクリックしないといけないし、ウィンドウを閉じるアクションも必要になるからね。マウスオンで表示するタイプが欲しかった。
Hint.css は設置が簡単
とにかくその程度のことなのJquery とかいれたくなかった。で、見つけたのが Hint.css。Hint.css のいいところは、link でソースを取り込んでしまえば、あとは表示するときの class 指定だけでポップアップが表示されるところだ。
Hint.css の使い方
1、Hint.css をダウンロードしてくる
2、目的のサイトへアップロード
3、CSSをリンクします。
<HEAD> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <link rel="stylesheet" href="hint.css-2.5.0/hint.min.css"> ←ここ <TITLE> ~~~ </TITLE> </HEAD>
4、ポップアップの表示
<span class="hint--bottom" data-hint="使用テーマ:abc_theme">妖怪ウォッチブログ</span>
こんな感じ。文字にマウスを乗せてみて。
妖怪ウォッチブログ
Hint.css の使い方、表示のカスタマイズ
多くの日本語サイトでは、ここまでの情報が多かった。じゃあ実際問題どんなクラス指定ができるんだ?
オフィシャルではサンプルが出てるけど、具体的なクラス名がわかるのは表示位置指定のクラスのみ。
表示位置の指定
1) hint–top2) hint–bottom
3) hint–left
4) hint–right
4つが基本になっているけど、 hint–top-left などと組み合わせも存在する。
詳しくは、hint.css を開いてみるとわかる。(たぶん)
サイズの指定
1) hint–small2) hint–medium
3) hint–large
色の指定
1) hint–error2) hint–warning
3) hint–info
4) hint–success
常時表示
1) hint–always角丸め
1) hint–rounded表示方法
1) hint–no-animate : もやぁ~んと表示するのをやめる2) hint–bounce : 表示してバウンドする
ただ、ワードプレスなどの場合、使用しているテーマによってはオプションが使えなかったりするので注意。
一応デフォルトでのヒントは表示されます。
スポンサーリンク