web-dev-qa-db-ja.com

Bootstrap popoverが機能しないのはなぜですか？

Bootstrap popover を使用しようとしています。そのため、サンプルから正確なコードをウェブサイトにコピーしましたが、残念ながら機能しません。以下の完全なコードを貼り付けて ここではjsfiddle を作成しました。

bootstrapコンテナと行と列に入れてみましたが、何も動作しないようです。

誰かがそのフィドルを機能させるにはどうすればよいですか？すべてのヒントは大歓迎です！

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
javascripthtmlcsstwitter-bootstrappopover
9
kramer65

これを忘れた： http://getbootstrap.com/javascript/#opt-in-functionality

パフォーマンス上の理由から、TooltipとPopover data-apiはオプトインです。つまり、自分で初期化する必要があります。

ページ上のすべてのツールチップを初期化する1つの方法は、data-toggle属性で選択することです。

$(function () {
    $('[data-toggle="popover"]').popover()
})
25
Seblor

追加する必要があります

$(function () {   
  $('[data-toggle="popover"]').popover() 
});

動作例 ここ

2
vamsikrishnamannem

パフォーマンス上の理由から、自分でpopoverを初期化する必要があります。

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

参照

ブートストラップの前に、必ずjQueryライブラリを追加してください。

jsFiddle

2
jmgross

フィドルへの関数呼び出しが欠落していて、jqueryライブラリーも欠落していた

不足している依存関係をあなたの例に追加しました

チェックフィドル：https://jsfiddle.net/L41g98qx/9/

ここにポップオーバーがあります関数呼び出し

_$(function () {
  $('[data-toggle="popover"]').popover()
})
_

以下のテキストはgetbootstrap.comからコピーされたもので、ポップオーバープラグインについて彼らが言いたいことは次のとおりです

オプトイン機能

パフォーマンス上の理由から、TooltipとPopover data-apiはオプトインです。つまり、自分で初期化する必要があります。

ページ上のすべてのポップオーバーを初期化する1つの方法は、データ切り替え属性でそれらを選択することです：コピー

$(function () { $('[data-toggle="popover"]').popover() })

2
Nilesh Mahajan

これを<head>に追加する必要がありますcode

$(function () {
$('[data-toggle="popover"]').popover()
})
1
khurram
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" id="example">Dismissible popover</a>

このメソッドは必須です

$('#example').popover('show');

[〜＃〜] demo [〜＃〜]

1
sheshadri

idにclassまたはbutton属性を追加してから、そのボタンでpopoverメソッドを呼び出すことができます。これが動作のフィドルです。 http://jsfiddle.net/uqLor9ze/ 。

これが fiddle のコード例です。

 $('#pop').popover();
0
Kamran