Twitter Bootstrap JQuery Elements（ツールチップ、ポップオーバーなど）を機能させる方法は？

StackOverflow https://stackoverflow.com/questions/9302667

質問

DreamWeaverのTwitter Bootstrapテストページで遊んでいますが、絶対にポップオーバー、ツールチップ、または他のブートストラップJQuery Goodieを機能させることはできません。デモページからコードをコピーし、ソースコードに注ぎ、すべての正しいJavaScriptファイルへの直接リンクを持っていますが、まだ何もありません。ただし、CSSは正常に機能しますが、アニメーションはどれもありません。

デモページは、このコードについて何かについて言及しています。

$('#example').popover(options)

しかし、私はそのようなものをどのようにすべきか分かりません。

誰かが私が欠けている（おそらく）小さなリンクのために私に提案を私に与えることができれば、私はそれを大いに感謝しています。

編集

これを投稿した後、次のコードスニペットを見つけました。

$(document).ready(function() {
    $("a[rel=popover]")
        .popover({
            offset: 10
        })
        .click(function(e) {
            e.preventDefault()
        })
});

そして、それはポップオーバーをトリガーしました！しかし、私が見た作業サイトのソースコードでそのようなものを見たことはありません。ブートストラップのドキュメントが、私のような新しいjQueryユーザーにとって、その小さな詳細をもう少し明確にすることを本当に願っています。

役に立ちましたか？

解決

ホバリングされたときにポップオーバーを表示する要素のIDまたはクラスを指定する必要があります。これが例です：

<div id="example">Some element</div>

<script>
  $('#example').popover({
    title: 'A title!',
    content: 'Some content!' 
  })
</script>

他のヒント

Googleからここに来る人々のために：

次のコードを使用して、ツールチップとポップオーバーを他のブートストラッププラグインと同様に自動的に動作させることができます。

<script type="text/javascript">
    $(function () {
        $('body').popover({
            selector: '[data-toggle="popover"]'
        });

        $('body').tooltip({
            selector: 'a[rel="tooltip"], [data-toggle="tooltip"]'
        });
    });
</script>

その後、通常のようなデータ属性を使用できます。

<a rel="tooltip" title="My tooltip">Link</a>
<a data-toggle="popover" data-content="test">Link</a>
<button data-toggle="tooltip" data-title="My tooltip">Button</button>

これは、これらのプラグインのデータAPIが「オプトイン」されていると言っている場合、ブートストラップドキュメントが意味するものです。

ブートストラップツールチップが必要な場合は、

    $(function () {
        $("[rel='tooltip']").tooltip();
    });

jqueryツールチップが必要な場合は、

    /*** Handle jQuery plugin naming conflict between jQuery UI ***/
$.widget.bridge('uitooltip', $.ui.tooltip);

    $(function () {
        $("[rel='tooltip']").uitooltip();
    });

HTMLは両方の場合に同じままです。

  <div title="Tooltip text" rel="tooltip"> div data ... </div>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top