Alterando a largura do popover do Bootstrap


192

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/

Respostas:


343

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

Popover de inicialização do Twitter aumenta a largura

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/


1
+1, mas funcionará / poderá não funcionar se seu popover estiver em um modal: veja minha resposta abaixo.
EML

2
A resposta acima foi TLDR para mim, mas continha esse trecho gênio que resolveu a largura e o problema de capturar todos os popovers:$('[data-toggle="popover"]').popover({ container: 'body' });
Gregory Cosmo Haun

2
Eu tive que adicionar!important
Peter Ehrlich

Você pode usar o atributo de dados mais puro: data-container="body"no elemento
Stephen

@ surfer190 Neater em uma base por popover, mas se você quiser que todo popover tenha , desorganize-se container: "body".
22816 Chris Cirefice

39

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.


28
Se você não é alfabetizado em café, aqui está a mesma última linha dos js regulares:.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });
Colin

1
O que é .tip ()? Por que usar .data ()? XD Eu realmente não entendo isso, mas funciona! Eu gosto mais desta solução do que escrever um novo CSS para substituir o padrão max-width. Obrigado por esta solução! Btw em vez de "600px", eu defini-lo "none". É melhor pra mim.
Taufik Nur Rahmanda

36

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>

1
Pode ser necessário adicionar! Important para substituir a configuração padrão de autoinicialização.
John Creamer

29

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/


2
Isso mudaria primeiro a largura do popover no site. Mas encontrei uma resposta. Mais corretamente, uma solução alternativa, publicando-a agora.
mayankbatra

@ Pedro, eu não posso reproduzir o problema, eu acho que você só esqueceu de adicionar dados por canal para sua entrada ...
BENARD Patrick

@ pbenard Estou tendo o mesmo problema, sua solução funciona para diminuir a largura máxima de 276 px. Mas se você tentar alterar a largura máxima mais do que isso, isso não mudará.
Hardik Patel

18

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>'
})

1
não funcionou para mim .. Também fui obrigado a adicionar max-width: 500pxestilo.
cronfy

7

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

Isso funcionou para mim, no entanto, apenas quando as configurações widthnãomax-width
Deano

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


não funcionou para mim. Eu esperava que funcionasse :( Odd
t.durden

6

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

4

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.


4

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.


1
+1 por ser irritante quando a popover aparece atrás do modal. Eu me deparei com esse mesmo problema com a diretiva de inicialização angular-ui usando uma dica de ferramenta tooltip-append-to-body, que apareceu por trás do modal e do fundo 'cinza'.
Daryn

4

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>

4

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

3

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)


2

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)


2

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

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

  }

1

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>

uau ... responde à pergunta original também. Limpe e não substitua a inicialização.
Johnathan Elmore

como isso muda a largura do popover?
Tdurden 16/08/19

1

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>


0

Para um componente datilografado:

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

0

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.


0

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


0

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.


-2

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

Isso não funcionará por causa da última linha. A análise de um número inteiro como valor da largura fará com que o CSS seja interrompido. Em vez disso, você deve tentar: $('.popover').css('width', popover_size + 'px');Como o popover_size é analisado como inteiro. Outra coisa é: popover_size = ((parseInt(string[0])+350));Adicionará largura extra.
Todor Todorov
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.