web-dev-qa-db-ja.com

Bootstrapポップオーバーが機能していません

bootstrap popoverは私のページを表示していません

これが私のHTMLです。

<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>

追加したすべてのjsファイルとcssファイルは次のとおりです。

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/bootstrap.min.css")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/bootstrap-theme.css")
@Styles.Render("~/Content/css/default.css")

@Scripts.Render("~/Scripts/jquery-2.1.1.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/bootstrap.js")

誰かが問題がどこにあるか教えてもらえますか？

PS：スクリプトコードを作成せずにポップオーバーを機能させる方法はありますか？

javascriptjquerytwitter-bootstraptwitter-bootstrap-3popover
33
Rodrigo de Farias

Popoversのドキュメントから ：

オプトイン機能：
パフォーマンス上の理由から、ツールチップとポップオーバーのデータAPIはオプトインです。つまり、自分で初期化する必要がありますです。

したがって、次のようにJavaScriptで.popover()を手動で呼び出す必要があります。

_$("[data-toggle=popover]").popover();
_

または、必要なセレクタを使用できます

StackSnippetsを使用した例を次に示します。

$("[data-toggle=popover]").popover();
_body {
  padding: 50px;
}_
_<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<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>_

注：これは、 Bootstrap Tooltip Not Up Up

109
KyleMit

受け入れられた答えは問題ありませんが、ポップオーバーを扱うときは、二重初期化の状況にも注意してください（ Fiddle example）。以下のJavaScriptは失敗します。

<br/>
<br/>
<a href="#" id="firstButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Working)</a>
<br/>
<br/>
<a href="#" id="secondButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Failing)</a>

ダブルイニシャライズして、ポップオーバーが変更される可能性のある値やカスタムコンテンツなどを使用する場合、あなたは怪我の世界にいるでしょう：

$(function () {
    $('#firstButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
    $('#secondButton').popover(); // <-- The first initializer does this, which causes the next one to fail on the next line.
    $('#secondButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
});
8
Alexandru