Modal hover

Bootstrap 5 Modal hover component

Responsive Modal hover built with Bootstrap 5.A simple example to get a modal form by hovering over an element.

Basic example

To trigger a modal form by hovering over an element add a onmouseover="triggerModal()" attribute in <button> element and corresponding JS function.

Edit in sandbox 
        
            
      <!-- Button trigger modal -->
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-target="#exampleModal" onmouseover="triggerModal()">
        Hover me !
      </button>
      
      <!-- Modal -->
      <div class="modal top fade" 
           id="exampleModal" 
           tabindex="-1" 
           aria-labelledby="exampleModalLabel" 
           aria-hidden="true" 
           data-mdb-backdrop="true" 
           data-mdb-keyboard="true">
        <div class="modal-dialog  ">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer">
              <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
                Close
              </button>
              <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
      
        
    
        
            
      function triggerModal(){
        const myModalEl = document.getElementById('exampleModal');
        const modal = new mdb.Modal(myModalEl);
        modal.toggle();
        }