Starbug1の項目設定ページの簡略化 説明文のtooltip化

Starbug1は、項目の自由なカスタマイズが可能であることが、売りです。しかし、項目設定ページは、結構ごたごたしたものになってしまっていました。設定方法がわかりにくいよりは、説明がページに表示されていた方がいいだろうということで、結構な量の説明文がインラインでページに記載されていました。

今までのごたごたした項目設定ページ

さすがにStarbug1の設定に慣れた人にとっては、いつも表示されているのは邪魔になると思い、JavaScriptでtooltipを表示するライブラリを利用して、設定項目にマウスオーバーした時だけ表示されるようにしました。

新しいすっきりした項目設定ページ

しかも、JavaScriptが使えない環境では、今まで通りインラインで説明文が表示されるので、古い環境への考慮もできています。

tooltip.js

採用したのは、tooltip.jsというライブラリです。Starbug1では、既にprototype.jsを利用してることもあり、導入は簡単でした。 基本的には、tooltop.jsを読み込んで、対象のエレメントのidと説明文のエレメントのidを指定して、Tooltipクラスのコンストラクタを呼び出してあげるだけです。

Starbug1の次のリリースに含まれる予定です。

1件のピンバック

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください