【Bootstrap】popoverとtooltipで改行する方法
本日は本当に軽い小ネタで失礼します。@pei_baboです。
みんな大好きBootstrapですが、良く重宝するのがpopoverとtooltipです。ちょっとした説明などはそのまま見せずにpopoverやtooltipを使ってオシャレに見せたいですよね。
ノンデザイナーなエンジニアでも少しはオシャレに見せたいのです。
プログラミングやWordPressを習得するのに一番近道な方法とは?
目次
data-htmlをtrueにすれば改行が出来る!
説明することも少ないので早速コードを載せちゃいますね。
popoverのコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- popover --> <button type="button" id="popover" data-html="true" data-content="ここで改行<br><br>する!" title="タイトル" data-toggle="popover"> クリックしてみて </button> <script> $(function() { $('#popover').popover(); }); </script> |
tooltipのコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- tooltip --> <button type="button" id="tooltip" data-html="true" data-toggle="tooltip" title="ここで改行<br><br>する!"> マウスオーバーしてみて! </button> <script> $(function() { $('#tooltip').tooltip(); }); </script> |
ポイントはdata-htmlをtrueにしていることですね。trueにすることでHTMLタグが使えるようになります。
HTMLタグが使えるならあとは好きに焼くなり煮るなり状態ですね。
デモはこちらから
まとめ
たまにあれ?改行どうやってやるんだっけ?っていつもググっちゃうので備忘録も兼ねての投稿でした!
どなたかのお役に立てれば嬉しいです。