javascript - Bootstrap material design - Ripples not showing in popover -
i using bootstrap material design: https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html
this includes neat ripple effect when pushing buttons, , works everywhere in page except in popover div has display:none in html made visible user javascript.
html:
<a href="#" class="pop" data-id="#popover_div1" data-container="body" data-placement="top" title="popover title">click open popover</a> <div id="popover_div1" style="display: none"> <div> <img class="img-rounded" src="img/temp.png" alt="temp" height="25" width="25"/> div content </div> <div> <div class="btn-group"> <a href="javascript:void(0)" class="btn btn-default">5</a> <a href="javascript:void(0)" class="btn btn-default">6</a> <a href="javascript:void(0)" class="btn btn-default">7</a> </div> </div> </div>
js:
$(".pop").popover({ trigger: "manual", html: true, animation:false, content: function() { return $($(this).attr('data-id')).html(); } }).on("mouseenter", function () { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; settimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 200); });
if take out style="display:none", ripple effect works, including makes ripples effect not work buttons inside div, strange. there way me keep display:none (because way popover works want to), still have ripples effect on buttons in div?
try calling $.material.ripples()
after showing popup.
Comments
Post a Comment