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.

Zomba

Did you find the answer for this one? I have the same issue. – Hoebart

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

})();

Osteology

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.

Lailaibach