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>