Angular 框架下ng-repeat内部使用tooltip插件的办法

Angular中使用Tooltip的正确姿势

最新推荐文章于 2025-12-02 21:41:05 发布

转载最新推荐文章于 2025-12-02 21:41:05 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webPang/p/8526758.html

文章标签：

#javascript #ViewUI

本文详细介绍了在Angular框架中实现Tooltip功能的步骤与技巧，包括如何通过自定义指令来确保Tooltip正常工作，以及在不同元素如按钮、链接和表格中应用Tooltip的具体方法。

　普通情况下

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

这样也就可以。

但是我们会发现在 angular中使用了没有效果。

解决办法

1.先写一个指令

.directive('tooltip',toolTipDirective);

function toolTipDirective() {
  return{
    restrict:'A',
    link:function (scope, element, attrs) {
      $(element).hover(function () {
        $(element).tooltip('show');
      },function () {
        $(element).tooltip('hide')
      })
    }
  }
}

2.加入到你需要显示的地方就可以了

<a class="home_a"  data-toggle="tooltip" data-placement="top" title="{{news.title}}"  
ng-click="newsState(news.id)" tooltip>{{news.title | characterNumFil:11}}
</a>

3.table表单的使用需要注意
 直接加在td上用有点问题
 可以在td里面加个标签 a span 等等

<td style="width: 30%;"><a ng-click='noticeAll(nos,1)' data-toggle="tooltip" 
　　　　data-placement="top" tooltip title="{{nos.title}}">
　　{{nos.title | characterNumFil:22}}</a>
</td>

转载于:https://www.cnblogs.com/webPang/p/8526758.html