マウスオーバーでポップアップを表示するHint.css の使い方。


スポンサーリンク

マウスオーバーでポップアップウィンドウを表示するツールを探す必要が出たのは、1ページの中に多くの情報を詰め込みたかったから。

自作ツールが高機能すぎてページがいっぱいいっぱい。例えばこういうの。
2017y05m10d_194700805

もういっぱいいっぱいで2段になってしまった。ページの横スクロールは効率が悪いのでこんな感じ。

これはワードプレスをボタン一つでインストールするツールで、インストールだけでなく管理もできる優れもの。
管理上、そのワードプレスがどのテーマをつかっているかとかフォルダーのパーミッションだとかもわかるようになっている。

けど、それを常時表示しておくのはさらに表示場所が必要になるわけだ。
そこで、マウスオーバーでポップアップさせて表示させようと思ってツールをさがしてみた。

※クリックでウィンドが出るタイプだといちいちクリックしないといけないし、ウィンドウを閉じるアクションも必要になるからね。マウスオンで表示するタイプが欲しかった。


Hint.css は設置が簡単


とにかくその程度のことなのJquery とかいれたくなかった。で、見つけたのが Hint.css。

Hint.css のいいところは、link でソースを取り込んでしまえば、あとは表示するときの class 指定だけでポップアップが表示されるところだ。


Hint.css の使い方



1、Hint.css をダウンロードしてくる
2017y05m10d_195808096

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 の使い方、表示のカスタマイズ


多くの日本語サイトでは、ここまでの情報が多かった。
じゃあ実際問題どんなクラス指定ができるんだ?

オフィシャルではサンプルが出てるけど、具体的なクラス名がわかるのは表示位置指定のクラスのみ。
2017y05m10d_201456659


表示位置の指定


1) hint–top
2) hint–bottom
3) hint–left
4) hint–right

4つが基本になっているけど、 hint–top-left などと組み合わせも存在する。
詳しくは、hint.css を開いてみるとわかる。(たぶん)


サイズの指定


1) hint–small
2) hint–medium
3) hint–large


色の指定


1) hint–error
2) hint–warning
3) hint–info
4) hint–success


常時表示


1) hint–always


角丸め


1) hint–rounded


表示方法


1) hint–no-animate : もやぁ~んと表示するのをやめる
2) hint–bounce : 表示してバウンドする


ただ、ワードプレスなどの場合、使用しているテーマによってはオプションが使えなかったりするので注意。
一応デフォルトでのヒントは表示されます。

スポンサーリンク