¿Cómo se puede desactivar el título en Twitter Bootstrap de la ventana emergente plugin?

Estoy usando la ventana emergente para mostrar una imagen que no requiere un título. Si no establece «título», se muestra aún un área donde el título. ¿Cómo se puede desactivar esta función por completo?

5 Kommentare

  1. 40

    baptme del sugieren está bien, pero la mejor manera sería especificar la ventana emergente del título y de hecho ocultar completamente como los márgenes todavía existen, con una altura de 0.

    .popover-title { display: none; }

    Edit: acabo de quicky miró a la fuente y allí parece ser un indocumentado opción:

    $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
        placement: 'right'
      , content: ''
      , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
      })

    Cuando se declara la ventana emergente utilizando JS, intente reemplazar la plantilla y especificar una ocultos en el título.

    $('#example').popover({
        template: '...<h3 class="popover-title" style="display: none"></h3>...'
    });

    La razón por la que digo no quita que se pueda causar errores de tiempo de ejecución si el elemento no existe. Ver Sherbrow comentario.

    • Si la ventana emergente es de $(‘#example’).ventana emergente(opciones), entonces ¿cuál es el CSS para ir a este elemento de identificación y no todos ventana emergente títulos?
    • La ventana emergente elemento se crea en mouseover y destruido en mouseleave. Usted no puede dirigirse específicamente a ese elemento. Véase mi edición para una posible solución
    • usted puede quitar, ya que se emplea con un selector de jQuery : jsfiddle.net/Sherbrow/3GMnz
    • principales +1 para que seamos conscientes de los indocumentados template: opción
  2. 5

    Terminé usando una combinación de las técnicas sugeridas por @Terry y @Sherbow. Muestra la imagen, pero no el título (para esta emergente solamente).

    <a href="#" id="contributors" rel="popover">contributors</a>
    
    ...
    
    <script>
    var contributor_img = '<img src="my_img/contributor.png" />'
    
    
    $(function ()
    { $('#contributors').popover({ 
        content: contributor_img, 
        template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>' });
    });
    </script>
  3. 1

    de la manera más fácil es hacer un conjunto de height:0px en la clase .popover-title y no uso data-original-title

    CSS:

    .popover-title { height: 0px;}
  4. 0

    También puede escribir una función para eliminar el elemento:

    function removeTitle(){
      $('.popover-title').remove();
    }
    
    $("a[data-toggle=popover]")
      .popover({
         html: true,
         animation: true
    })
    .click(function(e) {
      removeTitle();
      e.preventDefault()
    })

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea