Using Tooltipster Jquery Plugin in Angular js

Question

I have a table , on hover on a particular cell i need to show the tool tip with different values based on the cell it hovered .

I want to know how to use the plugin in Angular way and I'm facing problems in existing design.

Problem:

-Its not working on first hover.

-On second hover Tool tipster showing only the first value it hovered for all the cells.Values are not changing

-It should show the associateID with time

 $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 error in console like

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

Here is my Plunker

But my requirement is not to use multiple tool tip , change the values of the existing tool tip on hovering on a particular cell.

When multiple option is attached its not working for the first time .

Not sure this is the correct way of using jquery plugins in angular js. looking for the thumb rules/steps/procedure on using jquery plugins in angular js.

Pls guide me or is there any better way to acheive this.I'm a newbie to angular js.

Answer 1

I have written a directive to work with awesome Tooltipster.

Usage examples:

1) Display tooltip at the top (default position):

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

2) Display tooltip on the left with 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

I used below to solve this:

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

Below is my Directive:

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

Below is my Factory:

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>

Comment:

We need multiple option. Tooltip will be shown when user mouseover. If they wants to do any interaction then they need to click on the element so the tooltip will stay.