Bootstrap Tooltips Not Working Inside nav nav-sidebar class

Question

Tooltips are working fine when it's like this

    <li>
        <a href="#" data-toggle="tooltip" title="Some tooltip text!" class="sidebar-item-link">
            <span class="glyphicon glyphicon-home glyph-sidebar"></span>
            <span class="sidebar-text">Home</span>
        </a>
    </li>

But once I nest it inside a 'ul' with class nav and nav-sidebar, the tooltip no longer shows.

e.g.

<ul class="nav nav-sidebar">
    <li>
        <a href="#" data-toggle="tooltip" title="Some tooltip text!" class="sidebar-item-link">
            <span class="glyphicon glyphicon-home glyph-sidebar"></span>
            <span class="sidebar-text">Home</span>
        </a>
    </li>
</ul>

I couldn't find the answer to this anywhere. Thanks in advance!

Answer 1

Try this https://jsfiddle.net/2Lzo9vfc/43/

HTML

<ul class="nav nav-sidebar">
    <li>
        <a href="#" data-toggle="tooltip" title="Some tooltip text!" class="sidebar-item-link" data-placement="bottom">
            <span class="glyphicon glyphicon-home glyph-sidebar"></span>
            <span class="sidebar-text">Home</span>
        </a>
    </li>
</ul>

JS

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