Popover on hover

Bootstrap 5 Popover on hover

Responsive Popover on hover built with Bootstrap 5. Examples of custom html, directions, images & more.

To learn more read Popover Docs.

Basic example

To make popover work on hover just change the value in the data-mdb-trigger attribute to "hover".

Hollywood Sign on The Hill
Edit in sandbox 
<img
  src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
  class="img-thumbnail"
  alt="Hollywood Sign on The Hill"
  data-mdb-popover-init
  title="Popover title"
  data-mdb-content="And here's some amazing content. It's very engaging. Right?"
  data-mdb-trigger="hover"
/>

Four directions

To make popover work on hover just change the value in the data-mdb-trigger attribute to "hover".

Edit in sandbox 
<button data-mdb-button-init
  type="button"
  class="btn btn-secondary"
  data-mdb-container="body"
  data-mdb-ripple-init
  data-mdb-popover-init
  data-mdb-placement="top"
  data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
  Popover on top
</button>

<button data-mdb-button-init
  type="button"
  class="btn btn-secondary"
  data-mdb-container="body"
  data-mdb-ripple-init
  data-mdb-popover-init
  data-mdb-placement="right"
  data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
  Popover on right
</button>

<button data-mdb-button-init
  type="button"
  class="btn btn-secondary"
  data-mdb-container="body"
  data-mdb-ripple-init
  data-mdb-popover-init
  data-mdb-placement="bottom"
  data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
  Popover on bottom
</button>

<button data-mdb-button-init
  type="button"
  class="btn btn-secondary"
  data-mdb-container="body"
  data-mdb-ripple-init
  data-mdb-popover-init
  data-mdb-placement="left"
  data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
  Popover on left
</button>

Custom html on hover

If you want to add html content to popover add data-mdb-html="true" attribute to element and then you can add html code in data-mdb-content attribute. You can do it also via javascript. See how to do it here.

Edit in sandbox 
<button data-mdb-button-init
  type="button"
   data-mdb-ripple-init class="btn btn-lg btn-danger"
  data-mdb-popover-init
  data-mdb-content="<ul class='list-group list-group-light'><li class='list-group-item'>Cras justo odio</li><li class='list-group-item'>Dapibus ac facilisis in</li><li class='list-group-item'>Morbi leo risus</li></ul>"
  data-mdb-trigger="hover"
  data-mdb-html="true"
>
  Hover to see popover
</button>

Image on hover

To make the image on hover in popover just insert an image as an HTML element to the data-mdb-content and set the data-mdb-html to true.

Edit in sandbox 
<button data-mdb-button-init
  id="image-on-hover"
  type="button"
   data-mdb-ripple-init class="btn btn-lg btn-danger"
  data-mdb-popover-init
  title="Image"
  data-mdb-content="<img src='https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp' class='img-thumbnail' alt='Hollywood Sign on The Hill'/>"
  data-mdb-trigger="hover"
  data-mdb-html="true"
>
  Hover to see image
</button>