（Bootstrap）popoverの表示方法についての質問

Question

お世話になります。

現在、ブートストラップの以下のJavascriptを使って、popoverのボタンを作成していますが、
出るはずの表示が出てきませんので、ご助言をお願いいたします。

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

※以上のコードの「And here's some amazing content. It's very engaging. Right?」を表示させたいのですが
出てきません。

上記コードを機能させる為に、popover.jpを作成し、以下のコードを載せています。
$(function () {
$('[data-toggle="popover"]').popover()
})

解決をご存知の方がいらっしゃれば、ご助言をお願いいたします。

Answer 1

Plugin dependency
Popovers require the tooltip plugin to be included in your version of Bootstrap.

tooltip plugin が必須と書いてありますが、注意点としてはこんなところでしょう。
あとは、あなたの目の前のソースを見ない限り、動かない理由はわかりません。エスパーじゃありませんから。

Comments

[YousukeTanaka]

ご回答ありがとうございます。早速試してみます。

[YousukeTanaka]

以下のように試して見ましたが、結果できませんでした。このscriptはhtmlの</body>
の直前においています。

<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>

[退会済みユーザー]

ここだけ見せられたって、判断はつきません。現象を再現できるミニマムソースを提示してください。

第一に、
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
を書いている時点で間違いです。

[YousukeTanaka]

色々と試してみて、やっとできました。解決は、<script src="js/bootstrap.min.js"></script>の下に以下のコードを置きました。

$('.tooltip-tool').tooltip({
selector: "a[data-toggle=tooltip]"
})
$("a[data-toggle=popover]").popover()
</script>

ただしこれは偶然です。なぜpopoverの表示に成功したのかがわかっていませんので、
次の教訓になりません。bootstrapのサイトでよく、javascriptのコードを置くように指示してありますが、どこにおけばいいのか毎回苦しみます。何かご助言ありますでしょうか?

[退会済みユーザー]

だからなん度も言うように、ここだけ見せられたって助言も何もできませんがな。
エスパーじゃありません。

現象を再現できるミニマムソースを提示してください。

> 何かご助言ありますでしょうか?
基礎から学んでくださいとしか言えません。