Показать мод загрузки при наведении

Я пытаюсь отобразить Bootstrap Modal в своем интернет-магазине, когда мышь наводит курсор на товар. Я искал в Интернете и обнаружил следующее:
https://stackoverflow.com/a/12190456/3164891

Я получил его для работы в скрипке, добавив следующий код:

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

Но когда я хочу применить это к моей ситуации, я не могу заставить это работать
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>

Вызов модал

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

Когда я пытаюсь сделать это на моем сайте, модальный режим отображается только при нажатии на ссылку и ничего не делает при наведении курсора. Я также попробовал следующий код:

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

Я использую следующие версии:

• jQuery: 1.10.2.min
• Bootstrap: 3.2.0