Bootstrap tooltip opens and closes repeatedly -
i have bootstrap tooltip have custom styled. there seems issue it. whenever hover on it, opens , closes.
html -
<div class="container" style="padding-top:300px"> <div class="row"> <div class="col-md-12"> <span>a bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="tooltip text">i</span> </div> </div> <div class="row"> <div class="col-md-12"> <span>a bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="tooltip text">i</span> </div> </div>
here's inline link jsfiddle
you no longer using tooltip-arrow
visual arrow using :before
, :after
after visual arrow. problem have made arrow bigger , made own triangles. when make css arrow using borders. have set top border colors white , blue make seem arrow has border well. in doing have forgotten arrow still has bottom transparent border , transparent border covering element hovering on deploy tooltip. set :before
, :after
psuedo elements .tooltip-arrow
have bottom border of none. so:
.tooltip.top .tooltip-arrow:after { content: " "; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; left: -17px; top: -5px; border-width: 12px; border-top-color: #003f6e; border-bottom:none; } .tooltip.top .tooltip-arrow:before { content: " "; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; left: -15px; top: -5px; border-width: 10px 10px 0; border-top-color: #fff; border-bottom:none; z-index: 1; }
Comments
Post a Comment