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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -