php - Show Bootstrap modal on hover -

php - Show Bootstrap modal on hover -

i'm trying display bootstrap modal on webshop when mouse hovers on product. searched online , found following: http://stackoverflow.com/a/12190456/3164891 got work in fiddle adding next code:

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

but when want apply situation can't 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 modal

jquery('.item').hover(function () { jquery('#basicmodal').modal({ show: true }); });

when seek on site modal shows when href clicked , nil on hover. i've tried next code:

jquery('#basicmodal').modal({trigger: "hover"});

i'm using next versions:

jquery: 1.10.2.min bootstrap: 3.2.0

your javascript code firing modal on hover, it's not selecting right element:

jquery('#basicmodal')

in above line selecting element id === "basicmodal", in html id equal basicmodal-<?php echo $_product->getid()?>. 2 id strings must match, or can utilize jquery wildcard, jquery("[id^=basicmodal]") selects elements id sarting basicmodal.

here working version of code wildcard solution: http://jsfiddle.net/fcyafcgx/

php jquery twitter-bootstrap magento twitter-bootstrap-3