Estou projetando uma página usando o Bootstrap 3. Estou tentando usar um popover com placement: rightum elemento de entrada. O novo Bootstrap garante que, se você usar, form-controltenha basicamente um elemento de entrada de largura total.

O código HTML é mais ou menos assim:

<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>

A largura dos popovers é muito baixa, na minha opinião, porque não há nenhuma largura restante na div. Quero o formulário de entrada no lado esquerdo e um amplo popover no lado direito.

Principalmente, estou procurando uma solução em que não precise substituir o Bootstrap.

O JsFiddle em anexo. A segunda opção de entrada. Não usei muito o jsfiddle, então não sei, mas tente aumentar o tamanho da caixa de saída para ver os resultados, em telas menores nem o veríamos. http://jsfiddle.net/Rqx8T/

Aumente a largura com CSS

Você pode usar CSS para aumentar a largura do seu popover, da seguinte maneira:

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

Se isso não funcionar, você provavelmente deseja a solução abaixo e altera seu containerelemento. ( Veja o JSFiddle )

Contêiner de bootstrap do Twitter

Se isso não funcionar, você provavelmente precisará especificar o contêiner:

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

Mais informações

O popover está contido no elemento em que é acionado. Para estendê-lo "largura total" - especifique o contêiner:

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

JSFiddle

Veja o JSFiddle para testá-lo.

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

Eu também precisava de uma popover mais ampla para um campo de texto de pesquisa. Eu vim com esta solução Javascript (aqui no 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"))

A solução alternativa está na última linha. Antes da exibição do popover, a opção de largura máxima é definida como um valor personalizado. Você também pode adicionar uma classe personalizada ao elemento de dica.

Eu tive o mesmo problema. Passei bastante tempo procurando uma resposta e encontrei minha própria solução: Adicione o seguinte texto à cabeça:

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

Para alterar a largura, você pode usar css

Para tamanho fixo desejado

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

Para largura máxima desejada:

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

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

Para alterar a largura do popover, você pode substituir o modelo:

$('#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>'
})

Para pessoas que preferem a solução JavaScript. No Bootstrap, 4 tip () tornou-se getTipElement () e retorna um objeto no jQuery. Portanto, para alterar a largura da popover no Bootstrap 4, você pode usar:

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

<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>

Basicamente, eu coloquei o código popover na linha div, em vez da entrada div. Resolveu o problema.

Com a ajuda do que o @EML descreveu acima sobre popover em janelas modais e também o código mostrado pelo @ 2called-caos, foi assim que resolvi o problema.

Eu tenho um ícone no modal que quando clicado deve aparecer o pop-up

Meu 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>

My 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"); });

Nenhuma solução final aqui: / Apenas algumas considerações sobre como "limpar" de maneira limpa esse problema ...

Versão atualizada (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" em vez de class = "col-md-") do seu JSFiddle original: http://jsfiddle.net/tkrotoff/N99h7/

Agora, o mesmo JSFiddle com sua solução proposta : http://jsfiddle.net/tkrotoff/N99h7/8/
Não funciona: o popover está posicionado em relação ao <div class="col-*">+ imagine que você tenha várias entradas para o mesmo<div class="col-*"> ...

Portanto, se queremos manter a popover nas entradas (semanticamente melhor):

• .popover { position: fixed; }: mas sempre que você rolar a página, a popover não seguirá a rolagem
• .popover { width: 100%; }: não é tão bom, pois você ainda depende da largura do pai (por exemplo, <div class="col-*">
• .popover-content { white-space: nowrap; }: bom somente se o texto dentro do popover for menor que max-width

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

Talvez, usando navegadores muito recentes, os novos valores de largura CSS possam resolver o problema, mas não tentei.

container: 'body'normalmente faz o truque (veja a resposta de JustAnil acima), mas há um problema se sua popover estiver em um modal. O z-indexcoloca atrás do modal quando o popover é anexado body. Isso parece estar relacionado à edição 5014 do BS2 , mas estou recebendo o 3.1.1. Você não deve usar um containerde body, mas se você corrigir o código para

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

então você z-indexresolve o problema, mas a largura do popover ainda está errada.

A única correção que posso encontrar é usar container: 'body'e adicionar alguns css extras:

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

Observe que as soluções css por si só não funcionam.

Você pode usar o atributo data-container = "body" no 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>

Aqui está a maneira não-café de fazê-lo com o hover:

$(".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"
    });
  });
});

Uma solução testada para o Bootstrap 4 beta:

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

Juntamente com a instrução jQuery:

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

Nota lateral, data-container="body"ou container: "body"em HTML ou como um optionpara o popover({})objeto realmente não fazer o truque [talvez o trabalho, mas apenas em conjunto com a declaração CSS fazer];

Além disso, lembre-se de que o Bootstrap 4 beta depende do popper.js para seu posicionamento popover e dica de ferramenta (antes disso era tether.js)

Você pode ajustar a largura da popover com os métodos indicados acima, mas a melhor coisa a fazer é definir a largura do conteúdo antes que o Bootstrap veja e faça suas contas. Por exemplo, eu tinha uma tabela, defini sua largura e, em seguida, o bootstrap construiu um popover para adequá-lo. (Às vezes, o Bootstrap tem problemas para determinar a largura e é necessário entrar e segurar a mão dele)

Eu usei isso (funcionando bem):

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

 <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>

Acabo definindo div "popover-content" width para o número que eu quero. (outros IDs ou classe não funcionarão .....) Boa sorte!

  #popover-content{
      width: 600px;

  }

você também pode adicionar o data-container = "body" que deve fazer o trabalho:

<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>

Você pode alterar o modelo do seu popover. Com o data-templateatributo-ou com a parte relevante na função que o configura:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
  </body>
</html>

Para um componente datilografado:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})

Em Angular, ng-bootstrapvocê pode simplesmente container="body"controlar o acionador de popover (como botão ou caixa de texto). Em seguida, no seu arquivo de estilo global ( style.cssou style.scss), você deve adicionar .popover { max-width: 100% !important; }. Depois disso, o conteúdo do popover será automaticamente definido para sua largura de conteúdo.

No bootstrap 4, você pode simplesmente substituir o valor padrão da variável de bootstrap $popover-max-widthno arquivo styles.scss da seguinte maneira:

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

Mais sobre como substituir os padrões do bootstrap 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

No Bootstrap 4, você pode revisar facilmente a opção de modelo, substituindo a largura máxima:

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

Esta é uma boa solução se você tiver vários popovers na página.

Tente o seguinte:

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));