Show Bootstrap modal on hover

Question

I'm trying to display a Bootstrap Modal on my webshop when the mouse hovers over a product. I searched online and found the following:
https://stackoverflow.com/a/12190456/3164891

I got it to work in the Fiddle by adding the following code:

$('#openBtn').hover(function () {
    $('#modal-content').modal({
        show: true
    });
});

But when I want to apply it to my situation I can't get it to work
HTML

<li class="item">
    <a href="#" data-toggle="modal" data-trigger="hover" data-target="#basicModal-<?php echo  $_product->getId()?>" class="product-image" id="<?php echo $_product->getId() ?>">   
        <img id="product-collection-image-<?php echo $_product->getId(); ?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>" />
    </a>
</li>

<div class="modal fade" id="basicModal-<?php echo $_product->getID()?>" role="dialog"  aria-hidden="true" data-trigger="hover">
    <div class="modal-content">
         Modal Content
    </div>
</div>

Calling the modal

jQuery('.item').hover(function () {
    jQuery('#basicModal').modal({
        show: true
    });
});

When I try it on my site the modal only shows when the a href is clicked and does nothing on hover. I've also tried the following code:

jQuery('#basicModal').modal({trigger: "hover"});

I'm using the following versions:

• jQuery: 1.10.2.min
• Bootstrap: 3.2.0

Solution

Your javascript code that is firing the modal on hover, it's not selecting the right element:

jQuery('#basicModal')

In the above line you are selecting an element with id === "basicModal", but in your html the id is equal to basicModal-<?php echo $_product->getID()?>. The two id strings must match, or you can use a jquery wildcard, like JQuery("[id^=basicModal]") that selects all elements with id sarting with basicModal.

Here is a working version of your code with the wildcard solution: http://jsfiddle.net/fcyafcgx/