Agregue dinámicamente una clase al contenedor ‘popover’ de Bootstrap

He buscado exhaustivamente tanto StackOverflow como Google, pero aparece vacío. Así que disculpas de antemano si esto ya se ha pedido y resuelto.

NB: Soy un novato en jQuery, así que no estoy seguro de cómo escribir esto yo mismo. Estoy seguro de que este es un fragmento de código fácil, pero no puedo entenderlo.

Lo que quiero hacer es usar un elemento de data- (p. Ej. data-class o similar) para adjuntar una nueva clase (¡O ID, ya no soy quisquilloso!) Al popover de nivel superior

. El código que tengo actualmente es el siguiente:

jQuery:

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

HTML:

  

E idealmente el tipo de HTML que habría escupido, es algo como esto:

 

¿Esto es algo que puedo hacer? La documentación en el sitio de bootstrap para popovers es un poco escasa, así que me tomó un tiempo llegar a este punto, desafortunadamente 🙁

Gracias de antemano por cualquier y todas las respuestas!

Puedes hacer esto sin hackear Bootstrap y sin cambiar la plantilla, agarrando el objeto popover de los data de la persona que llama y accediendo a su propiedad $tip .

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

Hay otra manera de hacer esto en la versión 2.3 que es bastante simple en realidad. Usted anula la plantilla predeterminada para incluir la clase en el contenedor.

 var pop = $('a', this.el).popover({ trigger: 'click' , template: '

' });

Con base en lo que escribió @bchhun y muchos rasguños en la cabeza, sentí que debería responder a mi propia pregunta, ya que la hice funcionar. También noté que esto había sido favorecido y me gustaba, así que espero estar ayudando a alguien más que sea novato en jQuery como yo.

En la versión actual de Bootstrap [v2.1.0], todos los scripts están consolidados. Por lo tanto, si ha incluido todas las secuencias de comandos en su comstackción (y no ha editado ninguna línea nueva / extrajo algunas), diríjase a la línea 1108 del archivo .js minificado. Encontrarás el siguiente fragmento de código:

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

Vas a agregar una nueva línea a esto, que es:

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

Entonces, cada vez que agregue data-class a la llamada de popover, agregará el atributo a la

div.

Ahora que lo veo, es tan obvio 🙂

Es una publicación anterior, pero la agrego solo como referencia. Modificando la respuesta Shankar Cabus , en lugar de agregar la clase dinámica al padre, se agregará en el div creado .popover.

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

Espero que esto ayude 🙂

Simplemente configure la opción de “plantilla” oculta al inicializar la información sobre herramientas. No sé por qué el equipo de bootstrap mantendría esto en secreto …

 $(elem).popover({ template: '

' }).popover('show');

Espero que esto ayude…

¿Qué tal si agregas esa clase ÚNICAMENTE al popover apropiado, sin apuntar a otros?

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

o alguna variación, como tomar un nombre de clase personalizado a partir de los datos de ‘someElement’, así:

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

Esto se ha pedido hace unos años, y hay muchas respuestas. Pero … Recientemente, tuve que abordar el mismo problema yo mismo, y yo: (a) quería evitar manipular el código fuente y (b) necesitaba una solución genérica para reutilizarla constantemente (por lo que con la template: '...' solución template: '...' para cada inicialización estaba fuera).

Mi solución fue lo suficientemente simple, y es más o menos lo mismo que la respuesta marcada: pensé que popover es una extensión de la biblioteca tooltip.js . Quiero decir, compruébalo, el código fuente apenas supera las cien líneas . Así que creé un archivo llamado popover-extend.js , y popover-extend.js y pegué todo el código fuente de popover. A partir de ahí, fue fácil: manipular estas líneas de forma simple:

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

entonces:

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

Ahora puedes hacer:

  

Es un enfoque realmente bueno si eres como yo y quieres agregar más funcionalidades. por ejemplo, así es como agregué un botón de cierre genérico al título (aunque requiere que el popover tenga un ID específico):

 // added this to the the DEFAULTS close: '' // added this to the setContent function if (this.options.close) { var id = this.$element.attr('id'), btn = $("", { "class": "close", "id": "close", "onclick": "$('#"+id+"').popover('hide');" }), title = $tip.find('.popover-title'); btn.html("×"); btn.appendTo(title); } 

Lo mejor de todo es que todo lo que configura en los valores predeterminados se puede configurar a través de html, es decir, si agrega una variable llamada foo , podrá manipularla automáticamente a través de data-foo= .

Espero que esto ayude a cualquiera que busque una alternativa a la manipulación del código fuente

Tuve el mismo problema, me gustó la respuesta de @Kate, pero los cambios en el archivo de origen pueden generar tantos problemas en el futuro, probablemente olvidará estos pequeños cambios cuando actualice la versión de arranque. Entonces encontré otra forma de hacerlo:

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

Como @CorayThan lo arregla con data("popover")

El método tip () de popover devuelve el elemento popover y crea cuando no se crea, por lo tanto siempre obtendrás el elemento popover correcto, incluso si estás en la inicialización de popover (Este es mi caso = D).

Se está haciendo tarde aquí y me estoy cansando, pero aquí hay una línea rápida que no funcionará en el futuro si decides actualizar los archivos js de bootstrap.

Eche un vistazo al archivo bootstrap-tooltip.js en este momento en la línea 150.

Y aquí está la información sobre herramientas modificada en acción:

Aquí está la información sobre herramientas modificada en acción

Revisa la ventana del inspector y verás que la clase dinámica se ha agregado a la información sobre herramientas.

Voy a publicar una respuesta más larga y apropiada mañana.

Esto funciona para mí Está inspirado en la documentación de la rutina de arranque desde aquí , la sección Eventos .

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

También puede hacer uso de las opciones de ‘plantilla’

 $element.popover({ html: true, trigger: 'click', template: '', content: function() { return 'hello'; } }); 

Actualiza MY_CLASS desde tu atributo de clase de datos.

Extiende tu clase desde la clase principal del bootstrap core class lateral, simplemente agrega el atributo data-class y una opción dataClass: true para tu 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); 

para bootstrap v3.3.2, encontrará estas líneas en bootstrap.js

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

Luego agregas esta línea

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

Ahora, para agregar una clase en tu elemento popover, simplemente data-class="classexemple" un atributo data-class="classexemple" entonces todo funciona perfecto

Encuéntranos en http://www.mixpres.com

En Bootstrap 4 puede usar el atributo de data-template :

  

Lo siento, pero no entendí bien tu pregunta … ¿Pero lo que quieres es agregar un padre div? Tómelo con calma … Vea si esto es lo que quiere:

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

Demostración: http://jsfiddle.net/PRQfJ/

La mejor opción que funciona en cada versión de BS, es hacerlo dentro de una clase specefic y después de mostrar eso, encontrar esa clase y agregar tu nombre de clase a popover parrent

 // create a template that add the message inside var $tmp = $("
" + error + "
"); $(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");

Ahora tu popover tendrá clase hola

Aquí está mi solución alternativa, probablemente no la más eficiente, pero me pareció la más fácil de implementar.

  $('[data-content]').each(function(){ var options = { html: true //optional }; if ($(this)[0].hasAttribute('data-class')) { options['template'] = '

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

Simplemente agregue data-class="custom-class" al elemento como los otros ejemplos.

Podría usar la opción container para evitar esto.

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

o configurarlo a través de un atributo de etiqueta

 Foo 

Y agregue esto en algún lugar antes de cerrar la etiqueta del cuerpo

 

Entonces podrías hacer algo como #foo > .popover . Sé que esta no es una solución única para todos, pero es una forma de hacerlo.

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

Obtendrás la clase bs-popover-my-own-popover dentro del elemento .popover .

No estoy seguro de por qué quieres hacer esto, pero en mi ejemplo, solo quería establecer un estilo personalizado … Así que en CSS acaba de escribir el selector derecho para el popover actual. a.rating-popover – este es mi enlace para abrir popover. -> el elemento popover se generará al siguiente de ese elemento. para que podamos seleccionarlo con

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

y voila, fondo azul. para solo los popovers abiertos con un elemento de.poraver.rating