Popup Helper　というものを作った。 / JavaScript

とあるWebサイトを作っていて、簡単にON/OFFできて分かりやすい且つ汎用性のあるポップアップヘルパーを作る必要があったので作りました。

特徴

簡単にON/OFF
JavaScript書き換え不要
スタイリング自由

とにかく簡単に、そして汎用的に。

チュートリアル

ヘルプに表示する内容を指定する

ヘルプに表示する内容は、html要素に記述します。
ヘルプを表示したい要素にdata-help属性を追加します。
その値には、表示したい文字列を指定します。
また、「\n」は改行を表します。

<p data-help="ここにヘルプの内容を記述します">マウスを重ねるとヘルプが表示されます。</p>

インスタンスの作成

Popup Helperはクラス(オブジェクト)です。
まずはインスタンスを作成します。
実際は、onloadなどを使用してDOMが構築されてから作成します。

var help = new PopupHelper();

ON/OFF

ヘルプを有効にしたり無効にしたりします。
ヘルプを有効にすると、該当要素にマウスを重ねた時にポップアップされます。
無効にすればポップアップされなくなります。
ヘルプが有効(ON)の状態で要素の何処かをクリックすると、自動的にOFFになります。

var help = new PopupHelper();
help.ON(); // ヘルプを有効にする
help.OFF(); // ヘルプを無効にする
help.toggle(); // ヘルプのON/OFFを切り替える

特定の要素にだけヘルプを有効にする

自動でdata-helpを属性に持つ要素がヘルプを表示する対象の要素になりますが、特定の要素にだけヘルプを表示したい場合はインスタンスを作成するときに引数を与えます。
その引数は配列で要素のIDを指定します。

<script>
onload = function(){
	var help = new PopupHelper(["a","b"]);
	help.ON();
}
</script>
<p id="a" data-help="これはaです"></p>
<p id="b" data-help="これはbです"></p>
<p id="c" data-help="これはcです"></p>

ポップアップするボックスのスタイルを変更する

初期では、以下のように指定されています。

border: 1px solid #888;
background-color: #fff;
padding: 5px;
position: absolute;
display: none;
z-index: 10000001;

これを変更するには、ライブラリの該当箇所(12行目くらいから）を変更するか、
CSSにdiv#popup_helper_boxを指定します。
CSSに指定する場合は、全ての属性に対して!importantを付ける必要があります。

ポップアップボックスのIDを変更する

ライブラリの該当箇所（「popup_helper_box」と表記されているところ）を変更したいIDに全て置換すれば可能です。

ライセンス

このライブラリはLGPL(GNU Lesser General Public License)で配布されます。
要するに、「自由に改造して配布していいよ。でも著作権表記は残して、そして配布するときはまたLGPLを適用してね。」と言うことです。
2015/1/3追記：Version 1.0.1からより制限の緩いMIT LICENSEに変更しました。ご自由にお使いください。

ダウンロード

ライセンスに同意出来る方は、以下のリンクからダウンロードして下さい。
もちろん、作者はこのライブラリに関するいかなる問題についても責任を負いません。
しかし、なんらかのバグがあれば報告して下さると直すかも知れません。
hosi/PopupHelper · GitHub

Webっぽい

Webっぽい技術やそうでないことなど書きます。