Bootstrap tooltip Issue - tooltip still showing even if i click on the menu item and hover over other item

Question

So i have this strange issue with Bootstrap tooltips. I have a menu button when i click on it the menu toggles on. When the menu is on if i hover over any of the items the tooltip shows fine. But as soon as i click on any of the menu items the tooltip for that particular items gets stuck i.e it does not fades away/hides it stays there even if i hover over other items in the menu as you can see in the image also I clicked Home the tooltip got stuck and i hovered over About the tooltip shows properly but the Home tooltip is still there. I m not able to figure out why this is happening. Is this something to do with my styling or just an issue with bootstrap tooltip. Any help would be appreciated. Thanks in Advance.

Below is a snapshot of the issue and my code. and also here is the Fiddle

$(document).ready(function () {
    //menu toggle/navigation menu toggle 
    $('#menuToggle').off('click').on('click', function () {
        if ($("#slider").hasClass('closed')) {
            $(this).toggle('2');
            setTimeout(function () {
                document.getElementById('slider').classList.toggle('closed');
            }, 400)
        }
    });
    $(".closeMenu").on('click',function () {
        document.getElementById('slider').classList.toggle('closed');
        setTimeout(function () {
            $('#menuToggle').toggle('10');
        }, 500);
    });

    $('[data-toggle="tooltip"]').tooltip();
    $('a').on('click',function(e){
    e.preventDefault();
    })
});

.slider {
    overflow-y: hidden;
    max-height: 500px; /* approximate max height */
    transition-property: all;
    transition-duration: .8s;
}

    .slider.closed {
        max-height: 0;
    }

#menuToggle {
    border-radius: 50%;
    height: 60px;
    width: 60px;
    font-size: x-large;
    z-index: 1;
    text-align: center;
}

.menu {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 999;
    color: white !important;
}

.sub-nav {
    list-style: none;
    list-style-type: none;
    padding: 10px;
    width: 60px;
    max-height: 100%;
    z-index: 2;
    font-size: large;
}

    .sub-nav:first-child {
        -webkit-border-top-left-radius: 35px;
        -webkit-border-top-right-radius: 35px;
        -moz-border-radius-topleft: 35px;
        -moz-border-radius-topright: 35px;
        border-top-left-radius: 35px;
        border-top-right-radius: 35px;
    }

    .sub-nav:last-child {
        -webkit-border-bottom-left-radius: 35px;
        -webkit-border-bottom-right-radius: 35px;
        -moz-border-radius-bottomleft: 35px;
        -moz-border-radius-bottomright: 35px;
        border-bottom-left-radius: 35px;
        border-bottom-right-radius: 35px;
    }

    .sub-nav li {
        height: 40px;
        cursor: pointer;
         
    }

.tooltip-inner {
    background-color: #483D8B;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #483D8B;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #483D8B;
}

.fa{
   color:white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script SRC="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="menu">
            <button id="menuToggle" data-toggle="tooltip" data-placement="bottom" title="Click For Options" class="btn btn-primary"><span class="fa fa-list text-center"></span></button>
            <div class="slider closed" id="slider">
                <ul class="sub-nav label-primary text-center" style="color:white">
                    <li class="closeMenu" data-toggle="tooltip" title="Close"><span class="fa  fa-times"></span></li>
                    <li data-toggle="tooltip" title="Home"><a href="#/"><span class="fa  fa-home"></span></a></li>
                    <li data-toggle="tooltip" title="Events"><a href=""><span class="fa  fa-calendar"></span></a></li>
                    <li data-toggle="tooltip" title="Contact Us"><a href="#/contact"><span class="fa  fa-envelope"></span></a></li>
                    <li data-toggle="tooltip" title="About Us"><a href="#/about"><span class="fa  fa-info"></span></a></li>
                    <li data-toggle="tooltip" title="Log In"><a href="#/login" title="Account"><span class="fa  fa-sign-in"></span></a></li>
                </ul>
            </div>
        </nav>

Answer 1

You can use bootstrap Tooltip Option trigger to handle this situation.

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.

For more info read here

Check working demo HERE

JS:

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