74

StackOverflowとGoogleの両方を徹底的に検索しましたが、何も表示されません。ですから、これがすでに質問され解決されている場合は、事前にお詫び申し上げます。

注意：私はjQueryの初心者なので、これを自分で作成する方法がわかりません。これは簡単なコードスニペットだと思いますが、頭を包むことはできません。

私が探しているのは、data-要素（例：data-classまたは同様のもの）を使用して、新しいクラス（または、ID、私はもう気になりません！）をトップレベルのポップオーバーにアタッチすることです<div>。私が現在持っているコードは次のとおりです。

jQuery：

$('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .click(function(e) {
        e.preventDefault()
    });

HTML：

<a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here">

そして、理想的には、私が吐き出すHTMLの種類は、次のようなものです。

<div class="popover ... dynamic-class">
    <!-- remainder of the popover code as per usual -->
</div>

これは私にできることですか？ポップオーバーのブートストラップサイトのドキュメントは少しまばらなので、残念ながら、このポイントに到達するのに少し時間がかかりました:(

すべての回答を事前に感謝します！

4

22 に答える 22

55

バージョン 2.3 には、これを行う別の方法があります。これは実際には非常に簡単です。デフォルトのテンプレートをオーバーライドして、コンテナにクラスを含めます。

var pop = $('a', this.el).popover({
  trigger: 'click'
  , template: '<div class="popover awesome-popover-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});
于 2013-02-14T04:27:15.857 に答える
22

@bchhunが書いたこととたくさんの頭を悩ませたことに基づいて、私はそれが機能するようになったので、私自身の質問に答えるべきだと感じました。また、これが好まれて気に入っていたことにも気づいたので、私のようなjQueryの初心者である他の誰かを助けたいと思います。

現在のBootstrapビルド[v2.1.0]では、スクリプトはすべて統合されています。したがって、ビルドにすべてのスクリプトを含めた場合（そして、新しい行を編集したり、一部を削除したりしていない場合）、縮小されていないファイルの1108行に進み.jsます。次のコードがあります。

$tip
  .css(tp)
  .addClass(placement)
  .addClass('in')

これに新しい行を追加します。これは次のとおりです。

  .addClass(this.$element.attr("data-class"))

data-classしたがって、ポップオーバー呼び出しに追加するたびに、属性が<div class="popover">divに追加されます。

私がそれを見た今、それはとても明白です:)

于 2012-08-30T12:52:19.997 に答える
18

古い記事ですが参考までに載せておきます。Shankar Cabusの回答を変更すると、動的クラスを親に追加する代わりに、作成された .popover div に追加されます。

$(function(){
    $('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .on("hover", function(){
        $('.popover').addClass($(this).data("class")); //Add class .dynamic-class to <div>
    });
});

お役に立てれば ：）

于 2013-01-16T08:43:22.580 に答える
8

これは数年前に尋ねられたもので、たくさんの答えがあります。しかし...私は最近、同じ問題に自分で取り組む必要がありました.(a)ソースコードの操作を避けたいと思っていました.(b)常に再利用される一般的なソリューションが必要でしたtemplate: '...'.

私の解決策は十分に単純で、マークされた回答と同じようなものです - ポップオーバーはライブラリの拡張であると考えました。tooltip.jsつまり、チェックしてみてください。ソースコードはわずか100行を超えています。そこで、 というファイルを作成し、popover-extend.jsポップオーバーのソース コード全体をコピーして貼り付けました。

Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
    // add this:
    cls: ''
});

それから：

Popover.prototype.setContent = function () {
    // add this:
    if (this.options.cls) {
        $tip.addClass(this.options.cls);    
    }

これで、次のことができます。

<a href="#" rel="popover" 
   data-cls="dynamic-class" 
   title="Title goes here" data-content="Content goes here">

あなたが私のようで、より多くの機能を追加したい場合、これは本当に良いアプローチです. たとえば、タイトルに一般的な閉じるボタンを追加する方法を次に示します (ただし、ポップオーバーに指定された ID が必要です)。

// added this to the the DEFAULTS
close: ''


// added this to the setContent function
if (this.options.close) {
    var id = this.$element.attr('id'),
        btn = $("<button></button>", {
            "class": "close",
            "id": "close",
            "onclick": "$('#"+id+"').popover('hide');"
    }),

    title = $tip.find('.popover-title');

    btn.html("&times;");
    btn.appendTo(title);
}

これの優れた点は、DEFAULTS で設定したものはすべて html を介して設定できることです。つまり、 という名前の変数を追加するとfoo、 を介して自動的に操作できるようになりますdata-foo=。

これが、ソースコードを操作する代わりの方法を探している人に役立つことを願っています

于 2014-03-16T09:03:57.997 に答える
3

ここで遅くなり、疲れてきましたが、ブートストラップのjsファイルを更新することにした場合、将来機能しない簡単なワンライナーを次に示します.

この要点の 150 行目の bootstrap-tooltip.js ファイルを見てください。

変更されたツールチップの動作は次のとおりです。

変更されたツールチップの動作は次のとおりです

インスペクターのウィンドウをチェックアウトすると、動的クラスがツールチップに追加されていることがわかります。

明日、より長期的で適切な回答を投稿します。

于 2012-08-29T04:14:54.457 に答える
2

また、「テンプレート」オプションを利用することもできます

$element.popover({                               
   html: true,
   trigger: 'click',
   template: '<div class="popover '+MY_CLASS+'" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
   content: function() {
    return 'hello';
   }
});

data-class 属性から MY_CLASS を更新します。

于 2015-01-30T07:01:12.603 に答える
2

これは私にとってはうまくいきます。これは、ここのイベントセクションのブートストラップのドキュメントに触発されています。

$("a[rel=popover]").popover().on("show.bs.popover", function(){
    $(".popover").addClass("your-custom-class");
});
于 2013-10-14T15:51:39.993 に答える
1

これは、クラスを外側から拡張しbootstrap core class、属性data-classとオプションdataClass:true をtooltip関数に追加するだけです

!function($){   
    $.extend($.fn.tooltip.Constructor.DEFAULTS,{
        dataClass: false
    }); 
    var Tooltip = $.fn.tooltip.Constructor;
        _show = Tooltip.prototype.show;

    Tooltip.prototype.show = function (){
        _show.apply(this,Array.prototype.slice.apply(arguments));

        if (this.options.dataClass!=="undefined" && this.options.dataClass){
            var that = this;
            var $tip = this.tip();
            if (this.$element.attr("data-class") !== undefined)
                $tip.addClass(this.$element.attr("data-class"));
        }
    };
}(jQuery);
于 2015-02-11T03:51:26.417 に答える
1

この問題の最善の解決策は、ポップオーバーを拡張し、独自のバージョンのポップオーバーを構築することです。以下はコードで、ブートストラップ バージョン 3.3.7 に基づいています。

        (function($){
            var PopoverEx = function(element, options){
                this.init('popover', element, options);
            }

                PopoverEx.prototype = $.extend({}, $.fn.popover.Constructor.prototype, {

                    constructor: PopoverEx,
                    tip: function(){
                        if(!this.$tip){
                            this.$tip = $(this.options.template);
                            if(this.options.modifier) this.$tip.addClass(this.options.modifier);
                        }
                        return this.$tip; 
                    }       
                });

            $.fn.popoverex = function(option){
               return this.each(function () {
                var $this   = $(this)
                var data    = $this.data('bs.popover')
                var options = typeof option == 'object' && option

                if (!data && /destroy|hide/.test(option)) return
                if (!data) $this.data('bs.popover', (data = new PopoverEx(this, options)))
                if (typeof option == 'string') data[option]()
              })
            }
        })(window.jQuery);

使用法

HTML コード

    <a href="#" class="btn btn-large btn-danger" 
          rel="popover" 
          data-modifier="popover-info" 
          title="A Title" 
          data-content="And here's some amazing content.right?">Hover for popover</a>

JS スクリプト

    jQuery(document).ready(function($) {
        $('[rel="popover"]').popoverex();
    });

この git ページから完全なバージョンと説明を見つけることができます https://gist.github.com/vinoddC/475669d94e97f4d7b6bcfde4cef80420

これは、Brian Woodward の作品の更新版です。

于 2018-09-08T07:09:39.010 に答える
0

申し訳ありませんが、あなたの質問をよく理解していませんでした...しかし、あなたが望むのは、親divを追加することですか? 気楽に...これがあなたが望むものかどうかを確認してください：

$(function(){
    $('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .on("click", function(){
        $(this).closest("div").addClass($(this).data("class")); //Add class .dynamic-class to <div>
    });
});

デモ: http://jsfiddle.net/PRQfJ/

于 2012-08-29T04:21:04.887 に答える
0

これが私の回避策です。おそらく最も効率的ではありませんが、実装が最も簡単であることがわかりました。

 $('[data-content]').each(function(){
    var options = {
        html: true //optional
    };

    if ($(this)[0].hasAttribute('data-class')) {
        options['template'] = '<div class="popover" role="tooltip ' + $(this).attr('data-class') + '"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';
    }

    $(this).popover(options);
});

data-class="custom-class"他の例のように要素に追加するだけです。

于 2016-05-19T18:55:31.330 に答える
-1

なぜこれをしたいのかわかりませんが、私の例では、カスタムスタイルを設定したかっただけです.CSSでは、現在のポップオーバーの正しいセレクターを記述しました. a.rating-popover - ポップオーバーを開くためのリンクです。-> popover 要素は、その要素の次の要素に生成されます。で選択できるように

a.rating-popover + div.popover{
   background: blue;
}

出来上がり、青い背景。.rating-popover 要素で開かれたポップオーバーのみ。

于 2013-05-01T13:20:31.580 に答える