user3766930 user3766930 - 5 months ago 29
CSS Question

Is there a way of adding a tooltip above one of the bootstrap carousel indicators?

I'm looking at the standard bootstrap full page carousel http://startbootstrap.com/template-overviews/full-slider/ and carousel indicators are defined as:

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>


I know it's relatively easy to add a tooltip for example to a button by writing:

<button class="btn btn-simple" id="mybutton" data-toggle="tooltip"
data-placement="top" data-original-title="Text of tooltip">


but is there a way of adding a tooltip to one of the three dots/indicators of carousel? I tried writing:

<li data-target="#myCarousel" data-slide-to="2" data-toggle="tooltip"
data-placement="top" data-original-title="Text of tooltip"></li>


but the tooltip is not visible...

Answer

See: http://getbootstrap.com/javascript/#tooltips

Opt-in functionality For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

$(function () {
   $('[data-toggle="tooltip"]').tooltip()
})

To add triggers:

$('IDHERE').tooltip({
    trigger: 'manual'
})

How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.