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>
        <h1 class="popover-header"></h1>
        <div class="popover-body"></div>
    </div>
</template>