bootstrap popover add content dynamically code example
Example 1: bootstrap popover
<button
type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?"
>
Click to toggle popover
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover"
>
Popover on top
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="right"
data-bs-content="Right popover"
>
Popover on right
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-content="Bottom popover"
>
Popover on bottom
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="left"
data-bs-content="Left popover"
>
Popover on left
</button>
Example 2: bootstrap popover on dynamic element
var popOverSettings = {
placement: 'bottom',
container: 'body',
html: true,
selector: '[rel="popover"]', //Sepcify the selector here
content: function () {
return $('#popover-content').html();
}
}
$('body').popover(popOverSettings);