BootstrapのPopoverをhoverで使って簡単に項目説明しちゃおう!

 
どうもpei(@pei_babo)です。

今日はBootstrapのPopoverの使い方を書いていきたいと思います。
最終的なイメージはこんな感じね。

 
bootstrap_popover_demo

ちょっと分かりづらいかなという用語をPopoverを使って説明するという使い方は結構あるのではないでしょうか。
ちなみにスマートフォンだとタップすると出てきます。

 

基本的な使い方

まずはBootstrap公式に書かれているやり方から見ていきましょう。

HTML


 
JavaScript

title属性にポップオーバーのタイトルの文字列を入れて、data-contentに内容を書くという感じです。

結果はこんな感じになります。
bootstrap popover2
クリックするとヒョコッと出てきます。

 

クリックじゃなくhoverで表示させたい

クリックさせるのはちょっとあれですよね。
出来ればマウスオーバーで説明が出てくれると嬉しいです。

オプションで簡単に出来ちゃいます。

JavaScript

triggerオプションに’hover’を設定するだけでOKです。

 

内容にHTMLタグを使いたい

ポップオーバー内でHTMLタグを使って色々カスタマイズしたいという時。
これもオプションで簡単に設定出来ます。

JavaScript

HTMLオプションをtrueにすれば、data-content属性にHTMLタグを入れることが出来るようになります。

HTML

結果はこんな感じ。
bootstrap popover3
HTMLタグを入れる時はダブルコーテーションとシングルコーテーションを使い分けてね。

 

ポップオーバーの横幅を変えたい

ポップオーバーの横幅がちょっと短いな…もうちょっと大きくしたい。
そんな時は以下のCSSを入れるだけでOKです。
当たり前ですがbootstrap.cssより後に宣言してくださいね。

CSS

 

項目説明のように使いたい

ポップオーバーは項目説明に使うのが一番使いやすいのではと思っています。

コード書いちゃいますね。

HTML

javascript

ちょっと今までと違うのがdata-contentを直接HTMLタグに入れるのではなくjQueryで後から追加している点ですね。
HTMLタグがゴチャゴチャするのが嫌だったのでこうやりました。
なんか他に良い方法があれば教えて欲しいです。

 

デモ

基本的な使い方と最後の説明用の使い方のデモを用意しました。

 

まとめ

今回はBootstrapのpopoverを紹介しましたが、tooltip系はbootstrapに限らずjQueryプラグインでたくさんあるので好みのものを使ってみてはいかがでしょうか。



 

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA


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