user3766930 user3766930 - 1 year ago 73
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 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>

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 Source


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

$(function () {

To add triggers:

    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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download