Использование Tooltipster JQuery Plugin в Angular js

Question

У меня есть таблица, при наведении на определенную ячейку мне нужно показать подсказку инструмента с различными значениями, основанными на ячейке, на которой он зависал.

Я хочу знать, как использовать плагин по Угловому пути, и я сталкиваюсь с проблемами в существующем дизайне.

Проблема:

-ITS не работает на первом парении.

-второе парение инструмента жучок показывает только первое значение он парил для всех cells.Values ​​не меняется

-Он должен показать 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 
       }); 
     }; 

Getting ошибки в консоли, как

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

Вот мой Plunker

Но мое требование состоит не в том, чтобы использовать несколько подсказок, чтобы изменить значения существующего наконечника инструмента при зависании на определенной ячейке.

При подключении к нему нескольких устройств он не работает в первый раз.

Не уверен, что это правильный способ использования jquery-плагинов в угловых js. ищет правила/шаги/процедуру большого пальца по использованию jquery-плагинов в угловых js.

Pls руководство меня или есть лучший способ добиться этого. Я новичок в угловых js.

Answer 1

Я написал директиву для работы с удивительным Tooltipster.

Примеры использования:

1) Отображение всплывающей подсказки в верхней (положение по умолчанию):

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 
       }); 
      } 
     } 
    }]); 

})(); 

Answer 2

Я ниже для решения этой проблемы:

http://codepen.io/jedfras/pen/KqiEb

Ниже моя директива:

app_.directive('popOver', ['myFactory', function (mf) { 
    return { 
     restrict: 'C', 
     link: function (scope, element, attr) { 
      setTimeout(function() { 
       element. 
       bind('mouseenter', function (e) { 
        element.inUpdate = true; 
        if (attr != null && attr.content !== null && attr.content !== "") { 
         mf.ToolTip(attr.content).success(function (data) { 
          hideSpinner(); 
          element.tooltipster({ 
           content: angular.element('<span>' + data + '</span>&nbsp;<span><a target=_blank href=' + '"http://google.com"' + '</a>More Help..</span>'), 
           contentAsHTML: true, 
           interactive: true, 
           multiple: true, 
           animation: 'grow', 
           trigger: 'click', 
           delay: 100, 
           maxWidth: 500, 
           speed: 300 
          }); 
          element.tooltipster('show'); 
          element.inUpdate = false; 

         }); 
        } 

       }). 
       bind('mouseleave', function (e) { 
        hideTooltipster(element); 
       }); 

      }, 400); 
     } 
    }; 
}]); 

Ниже моя фабрика:

app_.factory('myFactory', ['$http', function ($http) { 
    function getToolTip(query) { 
     //get the Tooltip based on query element 
     return $http.get("api/User/GetToolTip/" + query + "/" + misc_.guid()); 
    } 
    return { 
     ToolTip: getToolTip 
    }; 
}]) 

HTML:

<span class="pop-over" data-content="{{ qItem.fieldCaptionDetails }}">{{ qItem.fieldCaption }}</span> 

Комментарий:

Нам нужно несколько вариант. Подсказка будет показана при наведении указателя мыши. Если они хотят сделать какое-либо взаимодействие, тогда им нужно щелкнуть элемент, чтобы всплывающая подсказка осталась.