如何使Angular Bootstrap工具提示起作用?

rashadb

我正在遵循Angular bootstrap文档中的工具提示示例,但似乎无法使该工具提示正常工作。我正在使用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>

我有一张要用作工具提示的图像。我尝试将uib-tooltip移到img标签和div标签中。都行不通。这里发生了什么?

塞本那伦

这为我工作:

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) {

});

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular 2 md-工具提示不起作用

来自分类常见问题

在JFreeChart中,如何使XYBarRenderer的工具提示起作用?

来自分类Dev

Bootstrap工具提示CSS不起作用

来自分类Dev

Bootstrap工具提示不起作用

来自分类Dev

Bootstrap工具提示不起作用

来自分类Dev

Angular Bootstrap-工具提示不显示

来自分类Dev

如何使Twitter Bootstrap工具提示可访问?

来自分类Dev

如何更改Bootstrap工具提示的字体

来自分类Dev

如何使React Bootstrap工具提示适合容器?

来自分类Dev

如何使Twitter Bootstrap工具提示可访问?

来自分类Dev

Bootstrap工具提示-如何访问“此”

来自分类Dev

如何更改Bootstrap工具提示文本?

来自分类Dev

Bootstrap工具提示在表内不起作用

来自分类Dev

Bootstrap工具提示单击触发器不起作用

来自分类Dev

Bootstrap Popover和工具提示不起作用

来自分类Dev

标签上的Bootstrap工具提示不起作用

来自分类Dev

工具提示不起作用

来自分类Dev

工具提示不起作用

来自分类Dev

崩溃报告工具如何真正起作用

来自分类Dev

如何在Python WTForms库中使用Bootstrap工具提示?

来自分类Dev

悬停2秒后如何使Bootstrap的工具提示消失

来自分类Dev

如何将Bootstrap Popover工具提示置于按钮中

来自分类Dev

如何使Bootstrap 3工具提示与文档中的显示相同

来自分类Dev

如何在Python WTForms库中使用Bootstrap工具提示?

来自分类Dev

如何在Bootstrap中检索按钮的工具提示文本?

来自分类Dev

如何在Bootstrap工具提示中使用MathJax?

来自分类Dev

angular.bootstrap不起作用

来自分类Dev

angular.bootstrap不起作用

来自分类Dev

Bootstrap Angular Datepicker格式不起作用