Popover

Using the popovers

Popovers are extracted from Bootstrap's libraries and work the same way. See the Bootstrap documentation for more details.

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="Popover on top" data-content="...">Popover on top</button>
<button class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Popover on bottom" data-content="...">Popover on bottom</button>
<button class="btn btn-primary" data-toggle="popover" data-placement="left" title="Popover on left" data-content="...">Popover on left</button>
<button class="btn btn-primary" data-toggle="popover" data-placement="right" title="Popover on right" 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
    })
})

This is an example with a super simple form inside a popover.

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>