Navbar子菜单上的Bootstrap Tooltip无法正常工作

Question

我正在尝试在导航栏上使用工具提示; 它工作得很好，如果它在没有子菜单项的菜单项上实现，但如果我尝试在子菜单项上使用它，它不会工作。

我的导航栏代码：

<!-- ============ START NAVBAR =========== --> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="#/" class="pull-left"><img src="images/logo.png"></a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 

     <!-- Home Menu --> 
     <li class="dropdown"> 
      <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b>Home </b><b class="caret"></b></a> 
      <ul class="dropdown-menu" id="menu1"> 
      <li><a href="documents/Newsletters/Open House Newsletter Summer 2016.pdf" target="_blank">Latest News</a></li> 
      <li><a href="#events">Coming Events</a></li> 
      <li><a href="#involved">Get Involved</a></li> 
      <li><a href="#partners">Partners</a></li> 
      <li><a href="#ceo">CEO Message</a></li> 
      <li><a href="#bibleRead">Bible Reading</a></li> 
      <li><a href="#pray">Pray For Us</a></li> 
      </ul> 
     </li> 

     <!-- About Us Menu --> 
     <li class="dropdown"> 
      <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b>About Us </b><b class="caret"></b></a> 
      <ul class="dropdown-menu" id="menu2"> 
      <li> 
       <a href="">Who We Are <i class="fa fa-caret-right"></i></a> 
       <ul class="dropdown-menu sub-menu"> 
       <li><a href="#origins">Our Origins</a></li> 
       <li><a href="#ourhistory">Our History</a></li> 
       <li><a href="#what">What We Do</a></li> 
       <li><a href="#why">Why We Do It</a></li> 
       <li><a href="documents/Strategic Plan-promotional.pdf" target="_blank">Strategic Plan</a></li> 
       </ul> 
       </li> 
       <li> 
       <a href="">Our People <i class="fa fa-caret-right"></i></a> 
       <ul class="dropdown-menu sub-menu"> 
       <li><a href="#board">Our Board</a></li> 
       <li><a href="#team">Our Team</a></li> 
       <li><a href="#volunteers">Volunteers</a></li> 
       <li><a href="#supporters">Supporters</a></li> 
       <!--<li><a href="#partners">Partners</a></li>--> 
       </ul> 
      </li> 
      <li><a href="#photos">Photos</a></li> 
      <li><a href="#videos">Videos</a></li> 
      <li><a href="#reports">Annual Reports</a></li> 
      <li><a href="#newsletter">News Letters</a></li> 
      <li><a href="#jobs">Job Vacancies</a></li> 
      <li><a href="#policies">Policies</a></li> 
      </ul> 
     </li> 

     <!-- Programs Menu --> 
     <li class="dropdown"> 
      <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b>Programs </b><b class="caret"></b></a> 
      <ul class="dropdown-menu" id="menu3"> 
      <li> 
       <a href="">Children and Youth <i class="fa fa-caret-right"></i></a> 
       <ul class="dropdown-menu sub-menu"> 
       <li><a href="#mothers">Play Group</a></li> 
       <!--<li><a href="#child">Children and Youth</a></li>--> 
       <li><a href="#boys">Boys 2 Men</a></li> 
       <li><a href="#girls">Fun 4 Girls</a></li> 
       <li><a href="#teens">Drop In Cafe</a></li> 
       <li><a data-placement="bottom" data-toggle="tooltip" href="#youth" data-original-title="Youth Workshop Mentoring Program">YWMP</a></li> 
       <li><a href="#backyard">Backyard Sports</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="">Adults <i class="fa fa-caret-right"></i></a> 
       <ul class="dropdown-menu sub-menu"> 
       <li><a href="#adult">Adult Workshops</a></li> 
       <li><a href="#bibleFellow">Bible Fellowship</a></li> 
       <li><a href="#clubwork">Clubwork</a></li> 
       <li><a href="#arts">Arts and Crafts</a></li> 
       <li><a href="#mens">Mens Support Group</a></li> 
       <li><a href="#individual">Individual Support</a></li> 
       <li><a href="#meal">Community Meal</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 

     <!-- Testimonials Menu --> 
     <li class="dropdown"> 
      <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><b>Testimonials </b><span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#participants">Participants</a></li> 
      <li><a href="#caregive">Care Givers</a></li> 
      <!--<li><a href="#sponsors">Our Sponsors</a></li>--> 
      </ul> 
     </li> 

     <li><a href="#links" data-toggle="tooltip" data-placement="top" title="Hooray!"><b>Useful links </b></a></li> 
     <li><a href="#contact"><b>Contact Us </b></a></li> 
     <li><a href="#donations" id="donationBtn" class="btn btn-primary btn-md" role="button" style="margin-top:2px; margin-bottom:-25px; !important; color: #ffffff;"><b> Donations </b><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<!-- ============ END NAVBAR =========== --> 

在这个导航栏的代码，它将在“相关链接”的工作（这是一个主菜单项）

<li><a href="#links" data-toggle="tooltip" data-placement="top" title="Hooray!"><b>Useful links </b></a></li> 

但是，如果我尝试使用它在“YWMP”这是一个子菜单，它不会;

<li class="dropdown"> 
      <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b>Programs </b><b class="caret"></b></a> 
      <ul class="dropdown-menu" id="menu3"> 
      <li> 
       <a href="">Children and Youth <i class="fa fa-caret-right"></i></a> 
       <ul class="dropdown-menu sub-menu"> 
       <li><a href="#mothers">Play Group</a></li> 
       <li><a href="#boys">Boys 2 Men</a></li> 
       <li><a href="#girls">Fun 4 Girls</a></li> 
       <li><a href="#teens">Drop In Cafe</a></li> 
       <li><a data-placement="bottom" data-toggle="tooltip" href="#youth" data-original-title="Youth Workshop Mentoring Program">YWMP</a></li> 
       <li><a href="#backyard">Backyard Sports</a></li> 
       </ul> 
      </li> 

哦，这里是我的jQuery代码：您的工具提示中显示

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

Answer 1

为了，你需要有一个title属性。更换

<a ... data-original-title="Youth Workshop Mentoring Program">YWMP</a> 

与

<a ... title="Youth Workshop Mentoring Program">YWMP</a> 

，它会工作。