Popover

Enable everywhere

Place this code just before the closing body tag.

$(function () {
    $('[data-toggle="popover"]').popover()
})

Example

<button class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Popover content.">Popover</button>

Positioning

<button class="btn btn-primary" data-toggle="popover" data-placement="top" title="..." data-content="...">Popover on top</button>
<button class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="..." data-content="...">Popover on bottom</button>
<button class="btn btn-primary" data-toggle="popover" data-placement="left" title="..." data-content="...">Popover on left</button>
<button class="btn btn-primary" data-toggle="popover" data-placement="right" title="..." data-content="...">Popover on right</button>

HTML and sanitizing

To turn HTML on for tooltips, you can use either the data attribute (data-html="true") och the js settings.

<button data-toggle="popover" html="true">Popover with HTML</button>

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

If you want to use elements like forms you need to turn off the html sanitize functionallity. This can only be done using the js options. Read more in the Bootstrap documentation.

$(function () {
    $('[data-toggle="popover"]').popover({
        sanitize: false
    })
})

Example of a simple popover form

In this example. the code for the form is inserted directly in the data attribute but in real practise it might be better using PHP and variables.

Age: 34 years

<!-- Form structure -->
<form class="form-inline">
    <input type="text" class="form-control mr-2" style="max-width: 150px"> 
    <button type="submit" class="btn btn-primary">Save</button>
</form>

<p class="mb-0">Age: 34 years <a href="#" class="small ml-2 text-muted" data-toggle="popover" data-content='<form class="form-inline"><input type="text" class="form-control mr-2" style="max-width: 150px"><button type="submit" class="btn btn-primary">Save</button></form>'><i class="fas fa-pen"></i></a></p>

<p class="mb-0">Age: <span data-toggle="popover" data-content='<form class="form-inline"><input type="text" class="form-control mr-2" style="max-width: 150px"><button type="submit" class="btn btn-primary">Save</button></form>' style="border-bottom: 1px dotted #333; cursor: pointer;">34</span> years</p>

Dismiss

Use the data-trigger="focus" to dismiss the popover on next click.

Specific markup required for dismiss-on-next-click

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.

Popover

<a class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-content="Dissmiss me...">Popover</a>