Popovers

This component requires Javascript for initialization. Click to view Javascript.

html

<a href="#" data-bs-toggle="popover" title="Popover Header"
   data-bs-content="Some content inside the Popover">
  Popover Link
</a>

html

<button type="button" class="btn btn-primary" data-bs-toggle="popover"
        title="Popover Header" data-bs-content="Some content inside the Popover">
  Popover Button
</button>

Placement

CODE

html

<button type="button" class="btn btn-primary m-2" data-bs-toggle="popover"
        data-bs-placement="top" title="Popover Header"
        data-bs-content="Some content inside the Popover">
  Top
</button>

html

<button type="button" class="btn btn-primary m-2" data-bs-toggle="popover"
        data-bs-placement="right" title="Popover Header"
        data-bs-content="Some content inside the Popover">
  Right
</button>

html

<button type="button" class="btn btn-primary m-2" data-bs-toggle="popover"
        data-bs-placement="bottom" title="Popover Header"
        data-bs-content="Some content inside the Popover">
  Bottom
</button>

html

<button type="button" class="btn btn-primary m-2" data-bs-toggle="popover"
        data-bs-placement="left" title="Popover Header"
        data-bs-content="Some content inside the Popover">
  Left
</button>

Dismissible

Dismissible Popover

CODE

html

<a href="#" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible Popover"
   data-bs-content="Click anywhere in the document to close this Popover">
  Dismissible Popover
</a>

Toggle on hover

Toggle Popover on hover

CODE

html

<a href="#" data-bs-toggle="popover" data-bs-trigger="hover" title="Popover on Hover"
   data-bs-content="Move away from the link to hide this Popover">
  Toggle Popover on hover
</a>

Javascript

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new materialstyle.Popover(popoverTriggerEl)
})

With jQuery

$('[data-bs-toggle="popover"]').popover();

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS