Popovers

<button popovertarget="popover">Popover text</button>
<div class="popover" id="popover" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>

<button popovertarget="popover-heading">Popover heading</button>
<div class="popover" id="popover-heading" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>

<button popovertarget="popover-close">Close button (text)</button>
<div class="popover" id="popover-close" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-close" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-close-heading">Close button (heading)</button>
<div class="popover" id="popover-close-heading" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-close-heading" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-close-top">Button top (text)</button>
<div class="popover" id="popover-close-top" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button class="close-popover" popovertarget="popover-close-top" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-close-heading-top">Button top (heading)</button>
<div class="popover" id="popover-close-heading-top" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button class="close-popover" popovertarget="popover-close-heading-top" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-icon-text">Button icon (text)</button>
<div class="popover" id="popover-icon-text" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button class="close-popover ico-btn ico-close" popovertarget="popover-icon-text" popovertargetaction="hide"><span class="vis-hidden">Close</span></button>
</div>

<button popovertarget="popover-icon-heading">Button icon (heading)</button>
<div class="popover" id="popover-icon-heading" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button class="close-popover ico-btn ico-close" popovertarget="popover-icon-heading" popovertargetaction="hide"><span class="vis-hidden">Close</span></button>
</div>

<button popovertarget="popover-start">Popover start</button>
<div class="popover offcanvas-start" id="popover-start" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-start" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-end">Popover end</button>
<div class="popover offcanvas-end" id="popover-end" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-end" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-top">Popover top</button>
<div class="popover offcanvas-top" id="popover-top" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-top" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-bottom">Popover bottom</button>
<div class="popover offcanvas-bottom" id="popover-bottom" popover>
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button popovertarget="popover-bottom" popovertargetaction="hide">Close</button>
</div>

<button popovertarget="popover-light" class="light">Light</button>
<div class="popover light" id="popover-light" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>

<button popovertarget="popover-dark" class="dark">Dark</button>
<div class="popover dark" id="popover-dark" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>

<button popovertarget="popover-primary" class="btn-primary">Primary</button>
<div class="popover-primary btn-primary" id="popover-primary" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>

<button popovertarget="popover-success" class="btn-success">Success</button>
<div class="popover-success btn-success" id="popover-success" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>

<button popovertarget="popover-danger" class="btn-danger">Danger</button>
<div class="popover-danger btn-danger" id="popover-danger" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>

<button popovertarget="popover-info" class="btn-info">Info</button>
<div class="popover-info btn-info" id="popover-info" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>

<button popovertarget="popover-warning" class="btn-warning">Warning</button>
<div class="popover-warning btn-warning" id="popover-warning" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>

<button popovertarget="popover-secondary" class="btn-secondary">Secondary</button>
<div class="popover-secondary btn-secondary" id="popover-secondary" popover>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
</div>