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".

        
            
            <img
              src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
              class="img-thumbnail"
              alt="Hollywood Sign on The Hill"
              data-mdb-toggle="popover" 
              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".

        
            

          <button
            type="button"
            class="btn btn-secondary"
            data-mdb-container="body"
            data-mdb-toggle="popover"
            data-mdb-placement="top"
            data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            data-mdb-trigger="hover"
          >
            Popover on top
          </button>
          
          <button
            type="button"
            class="btn btn-secondary"
            data-mdb-container="body"
            data-mdb-toggle="popover"
            data-mdb-placement="right"
            data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            data-mdb-trigger="hover"
          >
            Popover on right
          </button>
          
          <button
            type="button"
            class="btn btn-secondary"
            data-mdb-container="body"
            data-mdb-toggle="popover"
            data-mdb-placement="bottom"
            data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            data-mdb-trigger="hover"
          >
            Popover on bottom
          </button>
          
          <button
            type="button"
            class="btn btn-secondary"
            data-mdb-container="body"
            data-mdb-toggle="popover"
            data-mdb-placement="left"
            data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            data-mdb-trigger="hover"
          >
            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.

        
            

          <button 
            type="button" 
            class="btn btn-lg btn-danger" 
            data-mdb-toggle="popover"
            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.

        
            

          <button 
            id="image-on-hover" 
            type="button" 
            class="btn btn-lg btn-danger" 
            data-mdb-toggle="popover" 
            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>