css - bootstrap tooltip js

Cambiar el ancho de Bootstrap popover

Question

Estoy diseñando una página usando Bootstrap 3. Estoy tratando de usar un popover con placement: right en un elemento de entrada. El nuevo Bootstrap asegura que si usas form-control básicamente tienes un elemento de entrada de ancho completo.

El código HTML se ve más o menos así:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

El ancho de los popovers es demasiado bajo, en mi opinión porque no queda ningún ancho en el div. Quiero el formulario de entrada en el lado izquierdo, y un amplio popover en el lado derecho.

Sobre todo, estoy buscando una solución donde no tenga que anular Bootstrap.

El JsFiddle adjunto. La segunda opción de entrada. No he usado mucho jsfiddle, así que no sé, pero intente aumentar el tamaño del cuadro de salida para ver los resultados, en pantallas más pequeñas ni siquiera lo vería. http://jsfiddle.net/Rqx8T/

Answer 1

Aumenta el ancho con CSS

Puede usar CSS para aumentar el ancho de su popover, así:

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Si esto no funciona, probablemente desee la solución a continuación y modifique su elemento container . ( Ver el JSFiddle )

Contenedor de arranque de Twitter

Si eso no funciona, probablemente necesite especificar el contenedor:

// Contain the popover within the body NOT the element it was called in.
$(''[data-toggle="popover"]'').popover({
    container: ''body''
});

Más información

El popover está contenido dentro del elemento en el que se desencadena. Para ampliarlo "ancho completo", especifique el contenedor:

// Contain the popover within the body NOT the element it was called in.
$(''[data-toggle="popover"]'').popover({
    container: ''body''
});

JSFiddle

Vea el JSFiddle para probarlo.

JSFiddle: http://jsfiddle.net/xp1369g4/

Answer 2

Aquí está la forma no coffeescript de hacerlo con el vuelo estacionario:

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});

Answer 3

Con la ayuda de lo que @EML describió anteriormente con respecto a popover en ventanas modales y también el código mostrado por @ 2 llamado-caos, así es como resolví el problema.

Tengo un ícono en el modal que al hacer clic debería aparecer

Mi HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

Mi script

    $(''[rel=popover]'').popover({
        placement: ''bottom'',
        html: ''true'',
        container: ''#name-of-modal-window .modal-body''
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });

Answer 4

No hay una solución final aquí: / Solo algunos pensamientos de cómo "limpiamente" resolver este problema ...

Versión actualizada (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" en lugar de class = "col-md-") de su JSFiddle original: http://jsfiddle.net/tkrotoff/N99h7/

Ahora el mismo JSFiddle con su solución propuesta : http://jsfiddle.net/tkrotoff/N99h7/8/
No funciona: el popover está posicionado en relación con la <div class="col-*"> + imagine que tiene múltiples entradas para la misma <div class="col-*"> ...

Entonces, si queremos mantener el popover en las entradas (semánticamente mejor):

• .popover { position: fixed; } .popover { position: fixed; } : pero cada vez que se desplaza por la página, el popover no seguirá el desplazamiento
• .popover { width: 100%; } .popover { width: 100%; } : no es tan bueno ya que todavía dependes del ancho padre (es decir, <div class="col-*">
• .popover-content { white-space: nowrap; } .popover-content { white-space: nowrap; } : bueno solo si el texto dentro del popover es más corto que max-width

Ver http://jsfiddle.net/tkrotoff/N99h7/11/

Quizás, usando navegadores muy recientes, los nuevos valores de ancho de CSS pueden resolver el problema, no lo intenté.

Answer 5

Para cambiar el ancho del popover, puede anular la plantilla:

$(''#name'').popover({
    template: ''<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>''
})

Answer 6

Para las personas que prefieren la solución de JavaScript. En Bootstrap 4 tip () se convirtió en getTipElement () y devuelve un objeto no jQuery. Entonces, para cambiar el ancho del popover en Bootstrap 4 puedes usar:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

Answer 7

Prueba esto:

var popover_size=($(''.popover'').css(''width''));
var string=(popover_size).split(''px'');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$(''.popover'').css(''width'',parseInt(popover_size));

Answer 8

Puede ajustar el ancho del popover con los métodos indicados anteriormente, pero lo mejor que puede hacer es definir el ancho del contenido antes de que Bootstrap vea y haga sus cálculos. Por ejemplo, tenía una mesa, definí su ancho y luego bootstrap construyó un popover para adaptarlo. (A veces, Bootstrap tiene problemas para determinar el ancho, y necesitas entrar y sostener su mano)

Answer 9

Puede usar el atributo data-container = "body" dentro de popover

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>

Answer 10

También necesitaba un popover más amplio para un campo de texto de búsqueda. Se me ocurrió esta solución de Javascript (aquí en Coffee ):

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

La solución está en la última línea. Antes de que se muestre el popover, la opción de ancho máximo se establece en un valor personalizado. También podría agregar una clase personalizada al elemento tip.

Answer 11

Una solución probada para Bootstrap 4 beta:

.popover {
        min-width: 30em !important;
    }

Junto con la declaración jQuery:

$(''[data-toggle="popover"]'').popover({
      container: ''body'',
      trigger: ''focus'',
      html: true,
      placement: ''top''
    })

Nota al margen, data-container="body" o container: "body" en HTML o como una option para el objeto popover({}) no funcionó realmente bien [tal vez el trabajo sí pero solo junto con el CSS declaración];

Además, recuerde que Bootstrap 4 beta depende de popper.js para su posicionamiento de popover y tooltip (antes de eso era tether.js)

Answer 12

Usé esto (funciona bien):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

Answer 13

Yo tuve el mismo problema. Pasé bastante tiempo buscando una respuesta y encontré mi propia solución: agregue el siguiente texto a la cabeza:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

Answer 14

también puede agregar el contenedor de datos = "cuerpo" que debería hacer el trabajo:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover"

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

Answer 15

container: ''body'' normalmente hace el truco (ver la respuesta de JustAnil anterior), pero hay un problema si tu popover está en un modal. El z-index coloca detrás del modal cuando el popover está unido al body . Esto parece estar relacionado con el problema BS2 5014 , pero lo estoy obteniendo en 3.1.1. No debes usar un container de body , pero si arreglas el código para

   $(''#fubar'').popover({
   trigger : ''hover'',
   html    : true,
   dataContainer : ''.modal-body'',
   ...etc });

luego arreglas el problema del z-index , pero el ancho del popover sigue siendo incorrecto.

La única solución que puedo encontrar es usar container: ''body'' y agregar algo de css adicional:

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

Tenga en cuenta que las soluciones CSS por sí mismas no funcionarán.

Answer 16

Para cambiar el ancho puede usar css

Para el tamaño fijo deseado

.popover{
    width:200px;
    height:250px;    
}

Para ancho máximo deseado:

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle : http://jsfiddle.net/Rqx8T/2/

Answer 17

 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

Termino estableciendo el ancho div "popover-content" al número que quiero. (otros ID o clase no funcionarán ...) ¡Buena suerte!

  #popover-content{
      width: 600px;

  }

Answer 18

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Básicamente puse el código popover en la fila div, en lugar de la entrada div. Resuelve el problema.