it-swarm.com.de

Fügen Sie dem Popup-Container von Bootstrap dynamisch eine Klasse hinzu

Ich habe sowohl StackOverflow als auch Google gründlich durchsucht, bin aber leer. Also entschuldige mich im Voraus, wenn dies schon gefragt und gelöst wurde.

NB: Ich bin ein Neuling bei jQuery, daher bin ich mir nicht sicher, wie ich das selbst aufschreiben soll. Ich bin sicher, dass dies ein einfacher Code-Ausschnitt ist, aber ich kann meinen Kopf nicht darum wickeln.

Was ich suche, ist ein data--Element (zB: data-class oder ähnliches), um eine neue Klasse (Oder ID, ich bin nicht mehr wählerisch!) An das Popover der obersten Ebene <div> anzuhängen. Der Code, den ich derzeit habe, lautet wie folgt:

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

Und im Idealfall ist die Art von HTML, die ich ausgespuckt hätte, etwa so:

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

Kann ich das tun? Die Dokumentation auf der Bootstrap-Site für Popovers ist etwas spärlich, daher habe ich eine Weile gebraucht, nur um an diesen Punkt zu gelangen :(

Vielen Dank im Voraus für alle Antworten!

58
Kate

Sie können dies tun, ohne Bootstrap zu hacken und auch die Vorlage nicht zu ändern, indem Sie das Popover-Objekt aus der data des Aufrufers abrufen und auf seine $tip-Eigenschaft zugreifen.

$('a[rel=popover]')
  .popover({ placement: 'bottom', trigger: 'hover' })
  .data('bs.popover')
  .tip
  .addClass('my-super-popover');
65
Seth Jeffery

In Version 2.3 gibt es einen anderen Weg, der eigentlich recht einfach ist. Sie überschreiben die Standardvorlage, um die Klasse in den Container aufzunehmen.

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>'
});
45
cbaigorri

Basierend auf dem, was @bchhun schrieb, und viel Kopfkratzen, hatte ich das Gefühl, ich sollte meine eigene Frage beantworten, da es funktioniert hat. Ich habe auch gemerkt, dass dies beliebt und beliebt war. Ich hoffe, ich helfe jemandem, der ein Neuling bei jQuery ist, wie ich.

Im aktuellen Bootstrap-Build [v2.1.0] werden die Skripts alle konsolidiert. Wenn Sie also alle Skripts in Ihr Build aufgenommen haben (und keine neuen Zeilen bearbeitet/nicht herausgenommen haben), fahren Sie mit Zeile 1108 der nicht verkleinerten .js-Datei fort. Sie finden den folgenden Code:

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

Sie werden eine neue Zeile hinzufügen, und zwar:

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

Jedes Mal, wenn Sie dem Popover-Aufruf data-class hinzufügen, wird das Attribut dem <div class="popover"> div hinzugefügt.

Jetzt, wo ich es sehe, ist es so offensichtlich :)

22
Kate

Es ist ein alter Beitrag, aber ich füge es nur als Referenz hinzu. Wenn Sie Shankar Cabus answer ändern, wird die dynamische Klasse nicht zum übergeordneten Objekt hinzugefügt, sondern im erstellten .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>
    });
});

Hoffe das hilft :)

16
Etjie

Setzen Sie einfach die ausgeblendete Option "Vorlage", wenn Sie den Tooltip initialisieren. Ich weiß nicht, warum das Bootstrap-Team dies geheim halten würde ...

$(elem).popover({
    template: '<div class="popover YOURCLASS"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
}).popover('show');

Hoffe das hilft...

9
kdelmonte

Das wurde vor einigen Jahren gefragt und es gibt viele Antworten. Aber ... Ich musste kürzlich dasselbe Problem selbst angehen, und ich - (a) wollte die Manipulation von Quellcode vermeiden und (b) brauchte eine generische Lösung, die ständig wiederverwendet werden sollte (also die template: '...'-Lösung für jeden Initialisierung war aus).

Meine Lösung war einfach genug und entspricht in etwa der markierten Antwort - ich dachte, Popover ist eine Erweiterung der tooltip.js-Bibliothek. Ich meine - check it out, der Quellcode ist kaum mehr als hundert Zeilen . Also erstellte ich eine Datei mit dem Namen popover-extend.js und kopierte den gesamten Popover-Quellcode in ..__ ein. Von dort aus war es einfach - diese Zeilen einfach zu bearbeiten:

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

dann:

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

Jetzt können Sie tun:

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

Es ist ein wirklich guter Ansatz, wenn Sie wie ich sind und mehr Funktionalität hinzufügen möchten. So habe ich zum Beispiel eine generische Schließen-Schaltfläche zum Titel hinzugefügt (obwohl für den Popover eine angegebene ID erforderlich ist):

// 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);
}

Das Tolle daran ist, dass alles, was Sie in den DEFAULTS setzen, über html konfiguriert werden kann. Wenn Sie also eine Variable mit dem Namen foo hinzufügen, können Sie sie automatisch über data-foo= bearbeiten.

Ich hoffe, das hilft jedem, der nach einer Alternative zur Bearbeitung von Quellcode sucht

8
yuvi

Wie wäre es, wenn Sie diese Klasse NUR dem entsprechenden Popover hinzufügen, ohne andere anzusprechen?

$('#someElement').popover({placement: function(context, src) {
    $(context).addClass('my-custom-class');
    return 'top'; // - 'top' placement in my case
});

oder eine Variation, z. B. den benutzerdefinierten Klassennamen aus den Daten von 'someElement' wie folgt übernehmen:

$('#someElement').popover({placement: function(context, src) {
    $(context).addClass($(src).data('customClassName'));
    return 'top';
});
8
Janusz Krawiec

Ich hatte das gleiche Problem, ich mochte die Antwort von @Kate, aber Änderungen in der Quelldatei können in Zukunft so viele Probleme verursachen, dass Sie diese kleinen Änderungen wahrscheinlich vergessen, wenn Sie die Bootstrap-Version aktualisieren. So fand ich einen anderen Weg:

 $(element).popover({...}).data("popover").tip().addClass("your_class")

Als @CorayThan mit data("popover") beheben

Die Methode tip () of popover gibt das popover-Element zurück und erstellt, wenn es nicht erstellt wird. Daher erhalten Sie always das richtige popover-Element, auch wenn Sie sich bei der Initialisierung von popover befinden (This is mein Fall = D).

Es wird spät hier und ich werde müde, aber hier ist ein schneller Einzeiler, der in der Zukunft nicht funktionieren wird, wenn Sie die js-Dateien von bootstrap aktualisieren. 

Schauen Sie sich die Datei bootstrap-tooltip.js in dieser Gist in Zeile 150 an.

Und hier ist der modifizierte Tooltip in Aktion:

Here's the modified tooltip in action

Überprüfen Sie das Fenster des Inspektors dort unten, und Sie werden feststellen, dass die dynamic-class der QuickInfo hinzugefügt wurde.

Ich werde morgen eine langfristigere und passendere Antwort posten.

3
bchhun

Das funktioniert für mich. Es ist inspiriert von der Bootstrap-Dokumentation aus here , dem Events Abschnitt.

$("a[rel=popover]").popover().on("show.bs.popover", function(){
    $(".popover").addClass("your-custom-class");
});
2
Marius Ilie

Sie können auch "Vorlagen" -Optionen verwenden

$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';
   }
});

Aktualisieren Sie MY_CLASS von Ihrem Datenklassenattribut. 

2
Munawer Aziz

In Bootstrap 4 können Sie das data-template-Attribut verwenden:

<button data-toggle="popover" data-template='<div class="popover MYSUPERCLASS" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' data-offset="-10 0" data-html="true" data-trigger="focus" data-placement="bottom" data-content='My Popover'>Button</button>
1
Arerrac

Damit erweitern Sie Ihre Klasse von außen bootstrap core class, fügen Sie einfach das Attribut data-class und eine Option dataClass: true zu Ihrer tooltip-Funktion hinzu

!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);
1
Nguyen Linh

für bootstrap v3.3.2 finden Sie diese Zeilen in bootstrap.js

   $tip
    .detach()
    .css({ top: 0, left: 0, display: 'block' })
    .addClass(placement)
    .data('bs.' + this.type, this)

Dann fügen Sie diese Zeile hinzu 

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

Um nun eine Klasse zu Ihrem Popover-Element hinzuzufügen, müssen Sie lediglich ein Attribut data-class="classexemple" einfügen. Dann funktioniert alles perfekt 

Finden Sie uns auf www.mixpres.com

1
Serge Mul
$('a[rel=popover]')
  .popover({ placement: 'bottom', trigger: 'hover' })
  .data('bs.popover')
  .addAttachmentClass('my-own-popover')

Sie erhalten eine bs-popover-my-own-popover-Klasse in einem .popover-Element.

1
Eugene

Tut mir leid, aber ich habe deine Frage nicht ganz verstanden. Nehmen Sie es einfach ... Sieh nach, ob du es willst:

$(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>
    });
});

Demo: http://jsfiddle.net/PRQfJ/

0
Shankar Cabus

die beste Option, die bei jeder Version von BS funktioniert, besteht darin, sie in einer specefic-Klasse zu erstellen. Nachdem Sie das gezeigt haben, suchen Sie diese Klasse und fügen Sie Ihren Klassennamen zu popover parrent hinzu

// create a template that add the message inside
var $tmp = $("<div class='popoperrormessage'>" + error + "</div>");


            $(this).popover("destroy").popover({
                trigger: "manual",
                animation: false,
                html: true,
                placement:"right",
                content: $tmp,
                container: "body"
            }).popover("show");


            // now we have to find the parent of the popoperrormessagemessage
            $(".popoperrormessage").parents(".popover").addClass("hello");

Jetzt wird dein Popover hallo class haben

0
Ata

Hier ist mein Workaround, wahrscheinlich nicht der effizienteste, aber ich fand es am einfachsten zu implementieren.

 $('[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);
});

Fügen Sie dem Element einfach data-class="custom-class" hinzu, wie in den anderen Beispielen.

0
Pat Migliaccio

Die beste Lösung für dieses Problem besteht darin, den Popover zu erweitern und eine eigene Version von Popover zu erstellen. Unten ist der Code und basiert auf der Bootstrap-Version 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);

Verwendungszweck 

HTML Quelltext

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

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

Die vollständige Version und Beschreibung finden Sie auf dieser Git-Seite https://Gist.github.com/vinoddC/475669d94e97f4d7b6bcfde4cef80420

Es ist eine aktualisierte Version von Brian Woodwards Arbeit.

0
Vinod Chauhan

Sie können die Option container verwenden, um dies zu umgehen.

$('[data-toggle="popover"]').popover({
    container: '#foo'
});

oder setzen Sie es durch ein Tag-Attribut

<a href="#" data-toggle="popover" data-container="#foo" data-content="Content">Foo</a>

Fügen Sie dies irgendwo hinzu, bevor Sie den Body-Tag schließen

<div id="foo"></div>

Dann könnten Sie so etwas wie #foo > .popover machen. Ich weiß, dass dies keine einheitliche Lösung ist, aber es ist eine Möglichkeit, dies zu tun.

0
Hockic