2015
2
11

jQueryプラグイン、Darktooltipを使った画像入りツールチップのメモ

リンクリストが縦に並んでいて、マウスホバーで画像とちょっとしたテキストの情報が見えるようになりませんか? という依頼があったので、ツールチップで出来るのかなぁと思って調べて、やってみたメモです。


完成図

150211-1

※マウス操作環境でお試し下さい。IEは8以上で動きました。

使ったプラグイン

こちらの「HTML content」を利用して作りました。

コード

jQuery と 上記プラグインの js, css を読み込むところは割愛します。アニメーションなど、細かい設定は darktooltip.min.js では一部無いみたいだったので、今回は darktooltip.js のほうを使わせてもらいました。

jQuery

右側に出るように「west」で。「ダーク」ツールチップと謳っているのに、themeを「light」にしていますw

html

ul の中に div を入れるのは良くないかなぁと思ったので、こんな感じで…。

余談ですが、各 div 内の img と p の css を適用させるのに、

こういう書き方ではどうもうまくいかなくて、img と p それぞれに class を入れて適用させました。

css

文字を回り込ませたりとか、簡単なことしかしてませんが。

以上です! どなたかのご参考になれたら幸いですー!

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2015/02/11


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top