Nijmegen Component Library
You are viewing version 3 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>
        <h1 class="popover-header"></h1>
        <div class="popover-body"></div>
    </div>
</template>

Popovers

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

Notes

  • The titles in this component are rendered via h1 elements, every heading (h1 - h6) will work so choose your own heading according the structure of the page.

Using

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