How to change Popover size in Bootstrap 3?

Question

I have the following code of a Popover effect with Bootstrap 3, I am using Bootstrap 3.3.7. This one can works as follows, when the mouse passes over this icon the message appears. I have several popovers on the page, but that particular one is very great content and I need to increase the width of it so that it does not leave the area of vision. Someone knows how?

Follow my code and image can in operation.

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

Libraries that I am using besides the Bootstrap.min.css file downloaded on 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>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

You can increase not only the width from Popover like 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>
<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>

Answer 2

A class .popover of Bootstrap 3 has a max-width default of 270px, just you replace this value in .popover which is followed by the buttom who has a id for example...

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

I did so, notice that one .popover has a default width of 270px, and the .popover to come after the buttom with id="teste" will have the width I put in the CSS of 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>
    

See through Devtools that when you click on buttom is then added a div with class .popover as shown below:

OBS: Here is the official documentation of Bootstrap 3 about the Popover: https://getbootstrap.com/docs/3.3/javascript/#live-demo-1