Bootstrap PopOver Hacks

Here’s how you can add an HTML code on a data-content of a Bootstrap popover. On the example below, we’re going to add a link on our popover.

Below is a typical Bootstrap popover code.

HTML

<a href="#" role="button" class="popover" data-toggle="popover" title="" data-content="Sample Content <a href='http://winnieverzosa.com' title='sample link'>LINK</a>" data-original-title="Sample Title">Click me</a>

All you need to do is to pass an object to the popover function with a property HTML and set it to true.

JavaScript

<script>
$("[data-toggle=popover]").popover({html:true})
</script>

And that is it! You should be able to add any HTML code on your data-content.

Here’s you can manipulate the size of your popover.

You can just simply pass an object to the popover function with a property container and assign ‘body’ to it.

JavaScript

<script>
$("[data-toggle=popover]").popover({container: 'body'})
</script>

CSS

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Let’s put these together and here’s how you can use it.

HTML

<a href="#" role="button" class="popover" data-toggle="popover" title="" data-content="Sample Content <a href='http://winnieverzosa.com' title='sample link'>LINK</a>" data-original-title="Sample Title">Click me</a>

JavaScript

<script>
$("[data-toggle=popover]").popover({html:true, container: 'body'})
</script>

CSS

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Run snippet here -> https://www.bootply.com/winnieverzosa/7OYbHIuCUw