Trying to get the following tooltip to work in each tab but does not work for me....

Fiddle

<div class="tabbable">
<ul class="nav nav-tabs" role="tablist">
    <li class=""> <a href="#tab1" role="tab" data-toggle="tab" data-original-title="Our Stories">
<img src="/files/cache/cf16a20834dcce2bb50055192c532fad_f35.png" width="94" height="48" alt="Our Stories">
</a>

    </li>
    <li class=""><a href="#tab2" role="tab" data-toggle="tab" data-original-title="Bond + Bond">
<img src="/files/cache/70517c921a870be3c0580871aa6e8e8a_f36.png" width="99" height="50" alt="Bond">
</a>

    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade" id="tab1">
            <h2>Our Stories</h2>

    </div>
    <div class="tab-pane fade" id="tab2">
            <h2>Bond</h2>

    </div>
</div>

JS

$('[data-toggle="tab"]').tooltip({
'placement': 'top'
})

is it possible to have tooltip on tab links ?

Trying to get the following tooltip to work in each tab but does not work for me....

Fiddle

<div class="tabbable">
<ul class="nav nav-tabs" role="tablist">
    <li class=""> <a href="#tab1" role="tab" data-toggle="tab" data-original-title="Our Stories">
<img src="/files/cache/cf16a20834dcce2bb50055192c532fad_f35.png" width="94" height="48" alt="Our Stories">
</a>

    </li>
    <li class=""><a href="#tab2" role="tab" data-toggle="tab" data-original-title="Bond + Bond">
<img src="/files/cache/70517c921a870be3c0580871aa6e8e8a_f36.png" width="99" height="50" alt="Bond">
</a>

    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade" id="tab1">
            <h2>Our Stories</h2>

    </div>
    <div class="tab-pane fade" id="tab2">
            <h2>Bond</h2>

    </div>
</div>

JS

$('[data-toggle="tab"]').tooltip({
'placement': 'top'
})

is it possible to have tooltip on tab links ?

• javascript
• jquery
• twitter-bootstrap-3
• tooltip

• possible duplicate of Conflict between Bootstrap tabbable and popover – isherwood Commented Sep 24, 2014 at 17:38

2 Answers 2

You can. Simply add your tooltip functionality to li tag which wraps the anchor element with data-toggle=tab.

Check the DEMO

Answer borrowed from this related answer.

$('[data-toggle="tab"]').tooltip({
    trigger: 'hover',
    placement: 'top',
    animate: true,
    delay: 500,
    container: 'body'
});

Demo