1

Tenho o seguinte código de um efeito popover com o Bootstrap 3, estou utilizando o Bootstrap 3.3.7. Esse popover funciona da seguinte maneira, quanto o mouse passa em cima desse ícone aparece a mensagem. Tenho vários popovers na página, mas esse em específico é muito grande o conteúdo e eu preciso aumentar o width dele para que não saia da área de visão. Alguém sabe como?

Segue como tá o meu código e imagem do popover em funcionamento.

inserir a descrição da imagem aqui

<a href="#" data-toggle="popover" data-placement="left" data-trigger="hover" title="<strong>Informação</strong>" data-content="conteudo vem aqui"><i class="fas fa-question-circle"></i></a>

-

$('[data-toggle="popover"]').popover({html: true});

Bibliotecas que estou utilizando além do arquivo Bootstrap.min.css baixado no site, a versão é a 3.3.7:

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
2
  • Cara vc está usando alguma outra biblioteca que tenha esse popover? Pois ele não parece ser o modelo default do Boostrap... Coloquei esse seu código ai usando os arquivos padrão da documentação eu não consegui simular esse comportamento. Inclua as demais informações na pergunta. Arquivos CSS e JS extras que tenha usado e tudo mais
    – hugocsl
    Commented 25/10/2018 às 20:22
  • @hugocsl atualizei a pergunta com todas as bibliotecas que estou utilizando
    – user128653
    Commented 25/10/2018 às 20:29

2 Respostas 2

0

A class .popover do Bootstrap 3 tem um max-width default de 270px, basta vc substituir esse valor no .popover que venha seguido do buttom que tenha um id por exemplo...

#teste + .popover {
    max-width: 350px;
}

Eu fiz assim, repare que um .popover tem uma largura default de 270px, e o .popover que vir depois do buttom com id="teste" vai ter a largura que coloquei no CSS de 350px

$('[data-toggle="popover"]').popover({html: true});
#teste + .popover {
    max-width: 350px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<button type="button" id="teste" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">345</button>

<br>
<br>
<br>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">123</button>
    

Veja pelo DevTools que quando vc clica no buttom é adicionada em seguida dele uma div com a classe .popover conforme imagem abaixo:

inserir a descrição da imagem aqui

OBS: Aqui está a documentação oficial do Bootstrap 3 sobre o Popover: https://getbootstrap.com/docs/3.3/javascript/#live-demo-1

2
  • Sua resposta resolveu meu problema, obrigada!
    – user128653
    Commented 26/10/2018 às 13:39
  • @C.Oli legal que deu certo! Boa sorte ai com o projeto!
    – hugocsl
    Commented 26/10/2018 às 13:40
0

Você pode aumentar não só o width do popover como qualquer outra propriedade Css dele normalmente:

$(function() {
  $('[data-toggle="popover"]').popover({html: true})
})
.popover-content {
    color: red;
    font-size: 10px;
    width: 300px;             // aumenta o width
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#" data-teste="popover" data-toggle="popover" data-placement="right" data-trigger="hover" title="<strong>Informação</strong>" data-content="conteudo vem aqui"><i class="fas fa-question-circle"></i></a>

1
  • 1
    Teu método tbm me mostrou que da pra alterar não só o width, muito bom!
    – user128653
    Commented 26/10/2018 às 13:41

Você deve fazer log-in para responder a esta pergunta.