You are viewing version 2 of the library, the latest version is

Popovers

<!-- display above the button -->
<button type="button" class="btn btn-primary" data-toggle="popover" title="Popover titel" data-placement="top" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Bovenkant</button>

<!-- display on the right the button -->
<button type="button" class="btn btn-primary" data-toggle="popover" title="Popover titel" data-placement="right" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Rechterkant</button>

<!-- display underneath the button -->
<button type="button" class="btn btn-primary" data-toggle="popover" title="Popover titel" data-placement="bottom" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Onderkant</button>

<!-- display on the left the button -->
<button type="button" class="btn btn-primary" data-toggle="popover" title="Popover titel" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Linkerkant</button>

<!-- template which is used as popover -->
<template class="popover-template">
    <div class="popover" role="popover">
        <div class="arrow"></div>
        <button class="popover-close" aria-label="Sluit the popover"></button>
        <h3 class="popover-header"></h3>
        <div class="popover-body"></div>
    </div>
</template>

Popovers

Based on the version from MDB:
https://mdbootstrap.com/javascript/popovers/

Using

We discourage the use of this component since it is very difficult to use with assistive technology

To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example which reads the title, placement and content data attributes on the element to be used for the popover and should be placed in the Additional component(s) script section as documented in How to use.

<script>
    $('[data-toggle="popover"]')
        .popover({
            trigger: 'click',
            template: $('.popover-template').html()
        })
        .keyup(function (event) {
            if (event.key == 'Escape') {
                $(this).popover('hide');
            }
        })
        .on('inserted.bs.popover', function () {
            var $popup = $(this);
            $('.popover:last-child .popover-close').click(function (e) {
                $popup.popover('hide');
            });
        })
</script>