在Angular js中使用Tooltipster Jquery插件

Question

我有一张桌子,在悬停在特定单元格上时,我需要根据悬停的单元格显示不同值的工具提示.

我想知道如何以Angular方式使用插件,我在现有设计中遇到问题.

问题:

- 它不会在第一次悬停时工作.

- 第二个悬停工具提示器仅显示它为所有单元格悬停的第一个值.值不会改变

- 它应该显示associateID与时间

 $scope.SwipeDataDetails = function (associateid) {               
                $('.tooltip').tooltipster({
                    content: $('<div class="swipePopup"><div class="arrowPop"></div><div class="swipePopDetails"><div class="swipeContent1 fLeft"><img src="../images/Swipe_in.png"/> Swipe-In Time</div><div class="swipeContent2 fRight">' + associateid + '10:00AM' + '</div></div><div class="swipePopDetails"><div class="swipeContent1 fLeft"><img src="../images/Swipe_out.png"/> Swipe-Out Time</div><div class="swipeContent2 fRight">' + associateid + '11:00AM' + '</div></div><div class="swipePopDetailsTotal"><div class="swipeContent1 fLeft">Total Swipe Hours</div><div class="swipeContent2 fRight">' + associateid + '1.0' + '</div></div></div>'),                        
                    position: 'left',
                    offsetX: 0,
                    multiple:true
                });
        };

在控制台中获取错误

Tooltipster: one or more tooltips are already attached to this element: ignoring. Use the "multiple" option to attach more tooltips.

这是我的Plunker

但我的要求是不要使用多个工具提示,在悬停在特定单元格上时更改现有工具提示的值.

当附加多个选项时,它首次不工作.

不确定这是在角度js中使用jquery插件的正确方法.寻找在角度js中使用jquery插件的拇指规则/步骤/程序.

请指导我或有没有更好的方法来实现这一点.我是角度js的新手.

Answer 1

我已经编写了一个与很棒的 Tooltipster 一起使用的指令。

用法示例：

1）在顶部显示工具提示（默认位置）：

<a href="#" sb-apa-tooltip tooltip-content="Items Browser">

2）在左侧显示工具提示，maxWidth == 400px：

<a href="#" sb-apa-tooltip tooltip-content="hello<br>my friend" tooltip-position="left" tooltip-max-width="400">

sbApaTooltipDirective.js

(function() {

    angular
        .module('apa-tooltip-directive', [])
        .directive('sbApaTooltip', [function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                var position = attrs.tooltipPosition ? attrs.tooltipPosition : 'top';
                var maxWidth = attrs.tooltipMaxWidth ? attrs.tooltipMaxWidth : null;

                element.tooltipster({
                    position: position,
                    content: angular.element('<div>' + attrs.tooltipContent + '</div>'),
                    maxWidth: maxWidth
                });
            }
        }
    }]);

})();