Question

我正在关注Angular bootstrap docs中的工具提示示例，但我似乎无法让工具提示工作。我正在使用Angular版本1.5.5和angular-bootstrap版本0.11.2。

这是我的代码： app.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>

tooltip.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。两者都不起作用。这是怎么回事？

Answer 1

这对我有用：

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>

角色代码：

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('TooltipDemoCtrl', function ($scope) {

});

这会在页面的左上角显示一张图片。

你如何让Angular bootstrap工具提示工作？

1 个答案: