CODEWITHSUNDEEP
twitter-bootstrapangularjs
Kabb5
Kabb5

Reputation: 3870

Popover/tooltip on stacked progress bar using Bootstrap

I can't figure out how to make each section of a Bootstrap stacked progress bar display a popover or tooltip, preferably the former; however, a tooltip would be ok, too.

Outside of the <div class="progress"></div> I can make a <div> that will show a popover or tooltip like this:

<div class="mypopover" title="" data-content="content here" data-placement="bottom" data-toggle="popover" data-original-title="title here">click to see popover</div>

<script type="text/javascript">
  $('.mypopover').popover();
</script>

…however, this does not work:

<div class="progress">
  <div class="bar bar-success mypopover" style="width:50%;" title="" data-content="victory" data-placement="bottom" data-toggle="popover" data-original-title="successful">SUCCESS!</div>
  <div class="bar bar-danger mypopover" style="width:50%;" title="" data-content="so sad" data-placement="bottom" data-toggle="popover" data-original-title="unsuccessful">failure</div>
</div>

<script type="text/javascript">
  $('.mypopover').popover();
</script>

How do you get popovers (or tooltips) to work on the sections of a stacked progress bar? Thanks for your help!

Upvotes: 4

Views: 7674

Answers (1)

Yogesh
Yogesh

Reputation: 2228

Seems to be working fine here:

fiddle (Bootstrap 3)

fiddle (Bootstrap 2.3)

HTML:

<div class="progress">
  <div class="progress-bar progress-bar-success mypopover" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" title="" data-content="content here" data-placement="bottom" data-toggle="popover" data-original-title="title here" style="width: 40%">
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info mypopover" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" title="" data-content="content here" data-placement="bottom" data-toggle="popover" data-original-title="title here" style="width: 20%">
  </div>
</div>

Upvotes: 2

Related Questions