引导3工具提示工作，但具有默认浏览器样式，而不是引导样式

不知道这里会发生什么。我正在创建一个简单的条形图，我想添加一个工具提示来显示当用户悬停在每个栏上时的额外信息。工具提示出现，但没有引导样式。不知道我做错了什么。这里是我的index.html：引导3工具提示工作，但具有默认浏览器样式，而不是引导样式

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
<title>NY Lottery - Code Challenge</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body ng-controller="mainCtrl" ng-cloak> 
<div class="container"> 
    <div class="row text-center"> 
    <h1>Lottery Number Frequency</h1> 
</div> 
<div class="row"> 
    <div class="col-sm-12 text-center"> 
    <div class="graph" style="width:{{width}}px; height:400px;"> 

     <div class="y" style="width:{{height}}px;"> 
     <h3 class="yAxisLabel">{{yAxis}}</h3> 
     </div> 

     <div class="x"> 
     <h3 class="yAxisLabel">{{xAxis}}</h3> 
     </div> 

     <div ng-repeat="(key, value) in frequency track by $index | toArray | orderBy:$index " 
      class="bar animate-repeat" 
      style="height:{{value/max * height}}px; width:{{width/frequency.length - 5}}px; left:{{$index/frequency.length * width}}px;" 
      data-toggle="tooltip" title="{{key}} has been drawn {{value}} times" 
      > 

     <div class="keyLabel text-center" ng-class="{{key}} < 10 ? 'single-digit' : ({{key}} >= 10 ? 'double-digit' : '')"><p>{{key}}</p></div> 
     </div> 

    </div> 
    </div> 
    </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
    <script src="toArrayFilter.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.js"></script> 
    <script src="app.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
$(document).ready(function() { 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 
</script> 

</body> 
</html>

来源

2015-09-04 Bob

尝试使用这个初始化引导提示，而不是：

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

这将使工具提示为动态HTML进行初始化。

来源

2015-09-04 17:59:44 Matthew

它的工作。非常感谢！ – Bob

引导3工具提示工作，但具有默认浏览器样式，而不是引导样式

回答

相关问题