我正在关注 Angular Bootstrap 中的工具提示示例 docs但我似乎无法让工具提示正常工作。我使用的是 Angular 1.5.5 版和 angular-bootstrap 0.11.2 版。
这是我的代码: 应用程序.js
angular.module('app', ['ui.bootstrap'])
.controller('TooltipDemoCtrl', function ($scope) {
//doesn't matter from what I can tell
})
index.html
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
</body>
工具提示.html
<div ng-controller="TooltipDemoCtrl">
<div class="w-col w-col-4 w-col-small-4 w-col-tiny-4 w-clearfix icon-col">
<img width="17" src="../assets/images/pc-icon-two.png"
uib-tooltip="NOT WORKING" class="info-icon-five1">
</div>
</div>
我有一张图片想用作工具提示。我尝试在 img 标签和 div 标签中移动 uib-tooltip。两者都不起作用。这是怎么回事？
最佳答案
这对我有用:
html代码:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.angularjs.org/1.5.0-rc.2/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.4/ui-bootstrap-tpls.js"></script>
<script src="SO.js"></script>
</head>
<body >
<div ng-controller="TooltipDemoCtrl">
<div class="w-col w-col-4 w-col-small-4 w-col-tiny-4 w-clearfix icon-col">
<img width="17" src="SO/nick_pic2.jpg" uib-tooltip="WORKING" class="info-icon-five1">
</div>
</div>
</body>
</html>
Angular 代码:
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('TooltipDemoCtrl', function ($scope) {
});
这显示了页面左上角的图片。
关于angularjs - 你如何让 Angular Bootstrap 工具提示工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36904986/