Bootstrap工具提示问题 - 即使我点击菜单项并将鼠标悬停在其他项目上，工具提示仍会显示

Question

所以我对Bootstrap工具提示有这个奇怪的问题。当我点击菜单按钮时，我有一个菜单按钮。当菜单打开时，如果我将鼠标悬停在任何项目上，则工具提示显示正常。 但是只要我点击任何一个菜单项，该特定项目的工具提示就会被卡住，即它不会消失/隐藏它会停留在那里，即使我将鼠标悬停在菜单中的其他项目上，如图所示 我点击了Home，工具提示卡住了，我徘徊在关于工具提示显示正确，但Home工具提示仍在那里。 我无法弄清楚为什么会这样。这与我的样式有关，还是与bootstrap工具提示有关。 任何帮助，将不胜感激。在此先感谢。

以下是问题和我的代码的快照。这里也是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

您可以使用bootstrap Tooltip Option trigger来处理这种情况。

  

如何触发工具提示 - 点击|悬停|焦点|手册。你可以   传递多个触发器;用空格隔开它们。手册不能   结合任何其他触发器。

有关详细信息，请参阅here

检查工作演示HERE

JS：

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

Answer 2

bootstrap工具提示在那几天运行不好。如果你使用css悬停效果和调用position来制作你的自定义工具提示会更好。如果你想要我可以告诉你