Question

不知道什么事发生在这里。我正在创建一个简单的条形图，我想添加一个工具提示，以便在用户在每个栏上悬停时显示额外信息。工具提示显示，但没有引导样式。不知道我做错了什么。这是我的index.html：

<!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>

Answer 1

尝试使用它来初始化引导工具提示：

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

这将允许为动态HTML初始化工具提示。

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

1 个答案: