¿como adapto el tamaño del popover de bootstrap al tamaño del contenido?

publicado por: Anonymous

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

_x000D_

_x000D_

$( document ).ready(function() {_x000D_
   $('#prueba').html(funcion());_x000D_
   $('[data-toggle="popover"]').popover({_x000D_
         html : true_x000D_
   }); _x000D_
});_x000D_
    _x000D_
    _x000D_
function funcion(){_x000D_
        var json = [{_x000D_
              "id_procesos": 3,_x000D_
              "p": "Llenado de productos",_x000D_
              "unidad_teorica": 33333,_x000D_
              "udm": "ml",_x000D_
              "velocidad": 120_x000D_
            },_x000D_
            {_x000D_
              "id_procesos": 2,_x000D_
              "p": "Mezclaaaaaaaaaaa",_x000D_
              "unidad_teorica": 200,_x000D_
              "udm": "gg",_x000D_
              "velocidad": null_x000D_
            }];_x000D_
      console.debug(json);_x000D_
_x000D_
      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>";_x000D_
      $( json ).each(function( i, j ) {_x000D_
          procesos += "<tr>";_x000D_
              procesos += "<td>"+j.p + "</td>";_x000D_
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";_x000D_
              if(j.velocidad){_x000D_
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";_x000D_
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";_x000D_
              }else{_x000D_
                  procesos += "<td></td>";_x000D_
                  procesos += "<td></td>";_x000D_
              }_x000D_
          procesos += "</tr>";_x000D_
      });_x000D_
      procesos += "</table>";_x000D_
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';_x000D_
}_x000D_
    _x000D_
    _x000D_
    function tiempo_teorico(c_u_t, c_v, c_u_m){_x000D_
        var result = '';_x000D_
        if(c_v==''){_x000D_
            return result;_x000D_
        }else if(c_v==0){_x000D_
            result = 'La Velocidad del Producto no puede ser igual a 0';_x000D_
            return result;_x000D_
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){_x000D_
            var time = Math.floor( (c_u_t/c_v)*60 );  _x000D_
            var hours = Math.floor( time / 3600 );  _x000D_
            var minutes = Math.floor( (time % 3600) / 60 );_x000D_
            var seconds = time % 60;_x000D_
            //Anteponiendo un 0 a los minutos si son menos de 10 _x000D_
            minutes = minutes < 10 ? '0' + minutes : minutes;_x000D_
            //Anteponiendo un 0 a los segundos si son menos de 10 _x000D_
            seconds = seconds < 10 ? '0' + seconds : seconds;_x000D_
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30_x000D_
            return result;_x000D_
        }_x000D_
    }

_x000D_

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />_x000D_
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
_x000D_
<div id="prueba"></div>

_x000D_

_x000D_

_x000D_

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 😀

solución

Sobreescribe el max-width de .popover:

_x000D_

_x000D_

$( document ).ready(function() {_x000D_
   $('#prueba').html(funcion());_x000D_
   $('[data-toggle="popover"]').popover({_x000D_
         html : true_x000D_
   }); _x000D_
});_x000D_
    _x000D_
    _x000D_
function funcion(){_x000D_
        var json = [{_x000D_
              "id_procesos": 3,_x000D_
              "p": "Llenado de productos",_x000D_
              "unidad_teorica": 33333,_x000D_
              "udm": "ml",_x000D_
              "velocidad": 120_x000D_
            },_x000D_
            {_x000D_
              "id_procesos": 2,_x000D_
              "p": "Mezclaaaaaaaaaaa",_x000D_
              "unidad_teorica": 200,_x000D_
              "udm": "gg",_x000D_
              "velocidad": null_x000D_
            }];_x000D_
      console.debug(json);_x000D_
_x000D_
      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>";_x000D_
      $( json ).each(function( i, j ) {_x000D_
          procesos += "<tr>";_x000D_
              procesos += "<td>"+j.p + "</td>";_x000D_
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";_x000D_
              if(j.velocidad){_x000D_
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";_x000D_
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";_x000D_
              }else{_x000D_
                  procesos += "<td></td>";_x000D_
                  procesos += "<td></td>";_x000D_
              }_x000D_
          procesos += "</tr>";_x000D_
      });_x000D_
      procesos += "</table>";_x000D_
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';_x000D_
}_x000D_
    _x000D_
    _x000D_
    function tiempo_teorico(c_u_t, c_v, c_u_m){_x000D_
        var result = '';_x000D_
        if(c_v==''){_x000D_
            return result;_x000D_
        }else if(c_v==0){_x000D_
            result = 'La Velocidad del Producto no puede ser igual a 0';_x000D_
            return result;_x000D_
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){_x000D_
            var time = Math.floor( (c_u_t/c_v)*60 );  _x000D_
            var hours = Math.floor( time / 3600 );  _x000D_
            var minutes = Math.floor( (time % 3600) / 60 );_x000D_
            var seconds = time % 60;_x000D_
            //Anteponiendo un 0 a los minutos si son menos de 10 _x000D_
            minutes = minutes < 10 ? '0' + minutes : minutes;_x000D_
            //Anteponiendo un 0 a los segundos si son menos de 10 _x000D_
            seconds = seconds < 10 ? '0' + seconds : seconds;_x000D_
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30_x000D_
            return result;_x000D_
        }_x000D_
    }

_x000D_

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

_x000D_

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />_x000D_
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
_x000D_
<div id="prueba"></div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *