CODEWITHSUNDEEP
angularjstwitter-bootstrapbootstrap-slider
pbsbr
pbsbr

Reputation: 385

Tooltip is not working in bootstrap modal?

I used seiyria angular-bootstrap-slider for range slider,but initially when page loads the tooltip is at wrong position.when it is placed in normal page it is working fine,but in modal it is intially at wrong position,but when I click it will be set.So how to slove this issue.

HTMl:

<button class="btn btn-default" value="modal"
        onclick="confirmChangeMaxHours();"><i
            class="glyphicon glyphicon-cog"></i> Adjust Value

Here is the link:

Codepen

I found this suggestion in some site:

 setTimeout(function() {
slider.slider("relayout");
}, 500);

But,where I have to give setTimeout function,I tried to give but it is showing error like Slider is not defined.

Thanks in Advance.

Upvotes: 0

Views: 4685

Answers (3)

Mr. Jupiter
Mr. Jupiter

Reputation: 1

Put this code by Jquery into your work:

$('[data-toggle="tooltip"]').popover({
   html: true,
   trigger: 'hover', //Change to 'click' if you want to get clicked event
   placement: 'left
});

Upvotes: 0

Joebuntu
Joebuntu

Reputation: 1

In my implementation the modal was over the tooltip. So, to fix it, I put the tooltip over all elements by adding a big z-index to all tooltips.

.tooltip.tooltip-top,
.tooltip.tooltip-bottom,
.tooltip.tooltip-left,
.tooltip.tooltip-right {
  z-index: 100000;
}

Upvotes: 0

this.girish
this.girish

Reputation: 1306

add this css into your code

.tooltip{

  margin-left:-32px!important
}

Upvotes: 2

Related Questions