<!-- 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>
Based on the version from MDB:
https://mdbootstrap.com/javascript/popovers/
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>