BootstrapのPopoverをhoverで使って簡単に項目説明しちゃおう!
どうもpei(@pei_babo)です。
今日はBootstrapのPopoverの使い方を書いていきたいと思います。
最終的なイメージはこんな感じね。
ちょっと分かりづらいかなという用語をPopoverを使って説明するという使い方は結構あるのではないでしょうか。
ちなみにスマートフォンだとタップすると出てきます。
目次
基本的な使い方
まずはBootstrap公式に書かれているやり方から見ていきましょう。
HTML
1 2 3 | <button type="button" id="hoge" class="btn btn-lg btn-danger" data-toggle="popover" title="ここにタイトル" data-content="ここに説明文とか"> クリックしてみて </button> |
JavaScript
1 2 3 | $(function() { $('#hoge').popover(); }); |
title属性にポップオーバーのタイトルの文字列を入れて、data-contentに内容を書くという感じです。
結果はこんな感じになります。
クリックするとヒョコッと出てきます。
クリックじゃなくhoverで表示させたい
クリックさせるのはちょっとあれですよね。
出来ればマウスオーバーで説明が出てくれると嬉しいです。
オプションで簡単に出来ちゃいます。
JavaScript
1 2 3 4 5 | $(function() { $('#hoge').popover({ trigger: 'hover', // click,hover,focus,manualを選択出来る }); }); |
triggerオプションに’hover’を設定するだけでOKです。
内容にHTMLタグを使いたい
ポップオーバー内でHTMLタグを使って色々カスタマイズしたいという時。
これもオプションで簡単に設定出来ます。
JavaScript
1 2 3 4 5 | $(function() { $('#hoge').popover({ html: true, // HTMLオプションをtrueにする }); }); |
HTMLオプションをtrueにすれば、data-content属性にHTMLタグを入れることが出来るようになります。
HTML
1 | <button type="button" id="hoge" class="btn btn-lg btn-danger" data-toggle="popover" title="ここにタイトル" data-content="ここに<span style='red'>説明文</style>とか"> |
結果はこんな感じ。
HTMLタグを入れる時はダブルコーテーションとシングルコーテーションを使い分けてね。
ポップオーバーの横幅を変えたい
ポップオーバーの横幅がちょっと短いな…もうちょっと大きくしたい。
そんな時は以下のCSSを入れるだけでOKです。
当たり前ですがbootstrap.cssより後に宣言してくださいね。
CSS
1 2 3 | .popover { max-width: 500px; /* この数字を変える */ } |
項目説明のように使いたい
ポップオーバーは項目説明に使うのが一番使いやすいのではと思っています。
コード書いちゃいますね。
HTML
1 | シャッフルブログ <a href="javascript:void(0);" id="popover" data-toggle="popover" data-placement="top" title="シャッフルブログとは?"><span class="glyphicon glyphicon-question-sign"></span></a> |
javascript
1 2 3 4 5 6 7 8 9 10 | $(function() { // ポップオーバー文言 $('#popover').attr('data-content','元体育会系営業マンのpei(<a href="https://twitter.com/pei_babo">@pei_babo</a>)がシステム系のお固い話をライトに配信するブログです。'); // ポップオーバーアクション $("[data-toggle=popover]").popover({ trigger: 'hover', // click,hover,focus,manualを選択出来る html: true, // HTMLタグを含めるか }); }); |
ちょっと今までと違うのがdata-contentを直接HTMLタグに入れるのではなくjQueryで後から追加している点ですね。
HTMLタグがゴチャゴチャするのが嫌だったのでこうやりました。
なんか他に良い方法があれば教えて欲しいです。
デモ
基本的な使い方と最後の説明用の使い方のデモを用意しました。
まとめ
今回はBootstrapのpopoverを紹介しましたが、tooltip系はbootstrapに限らずjQueryプラグインでたくさんあるので好みのものを使ってみてはいかがでしょうか。