How to change size of Popover in Bootstrap 3?

Navigation
1

I have the following code for a popover effect with Bootstrap 3, I'm using Bootstrap 3.3.7. This popover works as follows, as the mouse passes over this icon the message appears. I have several popovers on the page, but this one in particular is very large content and I need to increase the width of it so it does not leave the view area. Does anyone know how?

Here's how my popover code and image works. 

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

Libraries that I'm using in addition to the Bootstrap.min.css file downloaded from the site, the version is 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><!--LatestcompiledJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
asked by anonymous 25.10.2018 / 21:58

2 answers

1

Bootstrap 3% class has .popover default of max-width , you just need to replace this value with 270px followed by .popover that has buttom for example ... 

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

I've done so, notice that a id has a default width of 270px, and the .popover that comes after .popover with buttom will have the width that I put in the CSS of id="teste" p> 

$('[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><scriptsrc="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>

See the DevTools that when you click on 350px is added next to it a buttom with class div as below:

OBS:HereistheofficialBootstrap3documentationon.popover: link

    
25.10.2018 / 22:40
1

You can increase not only the width of the popover but any other Css property of it normally: 

$(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><scriptsrc="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>
    
25.10.2018 / 22:25
How to know the direction of the mouse? App Closes when I'm going to test