面白いjQueryを見つけた。

http://heelhook.github.io/chardin.js/

要素に説明を入れられるプラグインのようで、早速LaunchCartの管理画面のヘルプ画面を作ってみた。

デモ

※なんでも良いのでキーボードを押して下さい

 

設置は簡単で、HTMLの要素に、例えばデモの左上「商品」部分であれば

というように

data-intro → 説明文

data-position → left、right、bottom、topというふうに位置を指定

 

実行は

とするだけでOK。

今回は

とした。

ヘルプ以外にも、詳しい商品説明やアプリケーションのチュートリアルなどに使えそうだ。