Using QTip2 In AngularJS Application

I have been using QTip2 in all our ASP.Net MVC applications for quite some time. Recently I created a new angularJS directive to integrate use of QTip2 in all our angularJS applications. In this post I will share the prototype implementation I have created to use QTip2 in AngularJS.

Qtip2 Directive


angular.module('ui.byteblocks.qtip', [])
.controller('QtipController', 
    ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
    var defaultOptions = {
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        style: {
            classes: 'qtip-default'
        },
        show: {
            delay: 500,
            when: 'mouseover',
            solo: true
        },
        hide: {
            when: 'mouseout'
        }
    };
    $scope.getQtipOptions = function (options) {
        return $.extend(true, defaultOptions, options ? options : {});
    };
    $scope.showTooltip = function() {
        if ($element.qtip) {
            $element.qtip('show');
        }
    }
    $scope.hideTooltip = function () {
        if ($element.qtip) {
            $element.qtip('hide');
        }
    }
    $scope.$on('destroy', function () {
        if ($element.qtip) {
            $element.qtip.destroy();
        }
    });
    $scope.attachQtip = function() {
    var css = $attrs["qtipCss"] ? $attrs["qtipCss"] : 'qtip-default';
    var el = $element;
    var thisOptions = {
        content: {
            text: $scope.qtipContent.text,
            title: {
                text: $scope.qtipContent.title
            }
        },
        position: {
            target: $($element)
        },
        style: {
            classes: css
        },
        events: {
            show: function (event, api) {
                var text = $scope.qtipContent.text;
                var title = $scope.qtipContent.title;
                if ($scope.qtipCallback) {
                    var newContent = $scope.qtipCallback({ id: $scope.qtipContext });
                    if (newContent) {
                        text = newContent.text;
                        title = newContent.title;
                    }
                }
                api.set('content.text', text);
                api.set('context.title', title);
            }
        }
    };
    var options = $scope.getQtipOptions(thisOptions);
    return $($element).qtip(options);
  };
}])
.directive('qtip', [function() {
    var directiveObj = {
        scope: {
            qtipContent: '=',
            qtipCallback: '&',
            qtipContext: '@',
            visible:'='
        },
        controller: 'QtipController',
        link: function (scope) {
            scope.attachQtip();
        }
    };
    return directiveObj;
}]);

As you can see that I have set the directive to expect following attributes .

  • qtipContent:This attributes is used to provide an object that has text and title properties to provide title and text for tool tip. This attribute has binding with object provided by parent scope.
  • qtipContext: This attributes allows to provide a unique identifier or any value specific to this tool tip. This value is supplied as argument to call back functions.
  • qtipCallback: This attributes allows you to provide a call back function. This function is called when tool tip is about to be shown. The return value of this function should be an object that provides text and title properties for respective values. I use this call back function to get any changes to tool tip content that may have happened.
  • qtipCss: This attribute allows you to set qtip css class to use. If you don't specify this value then qtip-default class gets applied by default.

Using QTip directive

Since I use these tool tips very extensively in my implementation on all pages, I have added that as a depenendency at the top module level.


    var WebPortal = angular.module("AngularWebPortal", ['ngRoute', 'ui.byteblocks.qtip']);

Next you will just specify this directive on any HTML element. I have specified this on my text box as shown below.


<input type="text" ng-model="tooltipText"
 qtip
 qtip-content="tooltipContent"
 qtip-context="1"
 qtip-css="qtip-blue"
 qtip-callback="getTooltipContent(id)" />

Next is an example how I applied it to a SPAN element.


<span qtip qtip-content="{title:'Span title', text:'Span text'}">Span It!</span>

This prototype Qtip directive provides a very basic implementation to wire QTip2 to any HTML element in your angularJS application. You can build up on this to customize and extend it to your needs.

comments powered by Disqus

Blog Tags