引导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>
答
尝试使用这个初始化引导提示,而不是:
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
这将使工具提示为动态HTML进行初始化。
它的工作。非常感谢! – Bob