6

Tengo una informacion guardada en un popover y deseo que se me adapte al contenido que tiene, pero no encuentro como. Acá el ejemplo:

$( document ).ready(function() {
   $('#prueba').html(funcion());
   $('[data-toggle="popover"]').popover({
         html : true
   }); 
});
    
    
function funcion(){
        var json = [{
              "id_procesos": 3,
              "p": "Llenado de productos",
              "unidad_teorica": 33333,
              "udm": "ml",
              "velocidad": 120
            },
            {
              "id_procesos": 2,
              "p": "Mezclaaaaaaaaaaa",
              "unidad_teorica": 200,
              "udm": "gg",
              "velocidad": null
            }];
      console.debug(json);

      var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Unidad Teórica</th><th>Velocidad</th><th>Tiempo Teórico</th></tr>";
      $( json ).each(function( i, j ) {
          procesos += "<tr>";
              procesos += "<td>"+j.p + "</td>";
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";
              if(j.velocidad){
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";
              }else{
                  procesos += "<td></td>";
                  procesos += "<td></td>";
              }
          procesos += "</tr>";
      });
      procesos += "</table>";
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';
}
    
    
    function tiempo_teorico(c_u_t, c_v, c_u_m){
        var result = '';
        if(c_v==''){
            return result;
        }else if(c_v==0){
            result = 'La Velocidad del Producto no puede ser igual a 0';
            return result;
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){
            var time = Math.floor( (c_u_t/c_v)*60 );  
            var hours = Math.floor( time / 3600 );  
            var minutes = Math.floor( (time % 3600) / 60 );
            var seconds = time % 60;
            //Anteponiendo un 0 a los minutos si son menos de 10 
            minutes = minutes < 10 ? '0' + minutes : minutes;
            //Anteponiendo un 0 a los segundos si son menos de 10 
            seconds = seconds < 10 ? '0' + seconds : seconds;
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
            return result;
        }
    }
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="prueba"></div>

NOTA: se que

Mezclaaaaaaaaaaa
no es una palabra que insertaran pero uno nunca sabe si el usuario usara una palabra larga y para evitar problemas a futuro quiero que el popover se adapte al contenido.

PD: de antemano gracias al que pueda brindarme su ayuda y su tiempo :D

2 respuestas 2

3

Sobreescribe el max-width de .popover:

$( document ).ready(function() {
   $('#prueba').html(funcion());
   $('[data-toggle="popover"]').popover({
         html : true
   }); 
});
    
    
function funcion(){
        var json = [{
              "id_procesos": 3,
              "p": "Llenado de productos",
              "unidad_teorica": 33333,
              "udm": "ml",
              "velocidad": 120
            },
            {
              "id_procesos": 2,
              "p": "Mezclaaaaaaaaaaa",
              "unidad_teorica": 200,
              "udm": "gg",
              "velocidad": null
            }];
      console.debug(json);

      var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Unidad Teórica</th><th>Velocidad</th><th>Tiempo Teórico</th></tr>";
      $( json ).each(function( i, j ) {
          procesos += "<tr>";
              procesos += "<td>"+j.p + "</td>";
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";
              if(j.velocidad){
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";
              }else{
                  procesos += "<td></td>";
                  procesos += "<td></td>";
              }
          procesos += "</tr>";
      });
      procesos += "</table>";
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';
}
    
    
    function tiempo_teorico(c_u_t, c_v, c_u_m){
        var result = '';
        if(c_v==''){
            return result;
        }else if(c_v==0){
            result = 'La Velocidad del Producto no puede ser igual a 0';
            return result;
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){
            var time = Math.floor( (c_u_t/c_v)*60 );  
            var hours = Math.floor( time / 3600 );  
            var minutes = Math.floor( (time % 3600) / 60 );
            var seconds = time % 60;
            //Anteponiendo un 0 a los minutos si son menos de 10 
            minutes = minutes < 10 ? '0' + minutes : minutes;
            //Anteponiendo un 0 a los segundos si son menos de 10 
            seconds = seconds < 10 ? '0' + seconds : seconds;
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
            return result;
        }
    }
.popover {
  max-width: 90% !important;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="prueba"></div>

4
  • gracias hermano, le daré la aprobación al que dio la respuesta segs antes.
    – bypabloc_
    el 2 mar. 2017 a las 20:18
  • @PabloContreras Guz contestó antes.
    – ffflabs
    el 2 mar. 2017 a las 20:19
  • @amenadiel confusión xD solucionado
    – bypabloc_
    el 2 mar. 2017 a las 20:20
  • @amenadiel gracias por la corrección
    – bypabloc_
    el 2 mar. 2017 a las 20:21
2

El ancho máximo del popover en bootstrap viene predeterminado en la hoja de estilos a 276px.

Si tú sobreescribes el estilo para tener max-width:100% éste podrá ocupar todo el contenedor.

.popover {
  max-width: 100% !important;
}

Ahora, por qué le puse important? simplemente porque en el demo que sigue los estilos de bootstrap pisan los estilos del fiddle. Puede que en tu caso no lo necesites.

$( document ).ready(function() {
   $('#prueba').html(funcion());
   $('[data-toggle="popover"]').popover({
         html : true
   }); 
});
    
    
function funcion(){
        var json = [{
              "id_procesos": 3,
              "p": "Llenado de productos",
              "unidad_teorica": 33333,
              "udm": "ml",
              "velocidad": 120
            },
            {
              "id_procesos": 2,
              "p": "Mezclaaaaaaaaaaa",
              "unidad_teorica": 200,
              "udm": "gg",
              "velocidad": null
            }];
      console.debug(json);

      var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Unidad Teórica</th><th>Velocidad</th><th>Tiempo Teórico</th></tr>";
      $( json ).each(function( i, j ) {
          procesos += "<tr>";
              procesos += "<td>"+j.p + "</td>";
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";
              if(j.velocidad){
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";
              }else{
                  procesos += "<td></td>";
                  procesos += "<td></td>";
              }
          procesos += "</tr>";
      });
      procesos += "</table>";
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';
}
    
    
    function tiempo_teorico(c_u_t, c_v, c_u_m){
        var result = '';
        if(c_v==''){
            return result;
        }else if(c_v==0){
            result = 'La Velocidad del Producto no puede ser igual a 0';
            return result;
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){
            var time = Math.floor( (c_u_t/c_v)*60 );  
            var hours = Math.floor( time / 3600 );  
            var minutes = Math.floor( (time % 3600) / 60 );
            var seconds = time % 60;
            //Anteponiendo un 0 a los minutos si son menos de 10 
            minutes = minutes < 10 ? '0' + minutes : minutes;
            //Anteponiendo un 0 a los segundos si son menos de 10 
            seconds = seconds < 10 ? '0' + seconds : seconds;
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
            return result;
        }
    }
.popover {
    max-width: 100% !important;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="prueba"></div>

1
  • gracias hermano, te daré la aprobación por que respondiste segundos antes.
    – bypabloc_
    el 2 mar. 2017 a las 20:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.