Add inline style option + add CoffeeScript source

README.md

@@ -26,6 +26,7 @@ qTip 2 directive for AngularJS.
 | qtipDelay | [optional] [string\|int] [default=100] | How long to wait before the qTip disappears after it becomes inactive when the `mouseleave` hide event is used (i.e, by default), in ms. |
 | qtipAdjustX | [optional] [int] [default=0] | Position the qTip more to the left or right, relatively, in pixels. Use a negative value to move it left. |
 | qtipAdjustY | [optional] [int] [default=0] | Position the qTip more to the top or bottom, relatively, in pixels. Use a negative value to move it up. |
+| qtipStyle | [optional] [object] [default={}] | Set inline style for the qTip. This should be a JS object that contains the JS-esque style properties (such as `maxHeight: '100vh'`) |
 | qtipSelector | [optional] [string] [interpolated] | CSS selector for element to use. When specified, the element found using the selector and jQuery will override any other content specified. |
 | qtipTemplate | [optional] [string] [interpolated] | Remote template to use for qTip. When specified, the template will be used for the qTip content and will override any other content specified. Use in conjuction with `qtipTemplateObject` |
 | qtipTemplateObject | [optional] [anyObject] | Will assign a model to the qTip template for use inside the template's content. You can reference this using `{{object}}` inside the template. |
@@ -38,18 +39,18 @@ qTip 2 directive for AngularJS.
 #### 1. Regular qTip
 
     <span qtip="Hi there, {{name}}!">{{name}}</span>
-    
+
 #### 2. Immediately visible qTip
 
     <span qtip="Woah!" qtip-visible="true">{{name}}</span>
-    
+
 #### 3. qTip from template, with multiple objects
 
-    <span qtip qtip-template="my_remote_template.html" 
+    <span qtip qtip-template="my_remote_template.html"
           qtip-template-object="{person: myPerson, callback: myCallback}">
         {{person.name}}
     </span>
-    
+
 ##### my_remote_template.html
 
     <span ng-click="object.callback(person)">

angular-qtip.coffee

@@ -0,0 +1,103 @@
+angular.module('qtip2', [])
+.directive 'qtip', ['$timeout', '$compile', '$http', '$templateCache', ($timeout, $compile, $http, $templateCache)->
+  restrict: 'A'
+  scope:
+    qtipVisible: '='
+    qtipDisable: '='
+    qtipFixed: '='
+    qtipDelay: '='
+    qtipAdjustX: '='
+    qtipAdjustY: '='
+    qtipStyle: '='
+    qtip: '@'
+    qtipTitle: '@'
+    qtipContent: '@'
+    qtipSelector: '@'
+    qtipTemplate: '@'
+    qtipEvent: '@'
+    qtipEventOut: '@'
+    qtipMy: '@'
+    qtipAt: '@'
+    object: '=qtipTemplateObject'
+  link: (scope, el, attrs) ->
+    string_to_bool = (str) -> !(String(str).toLowerCase() in ['false', '0', 'null'])
+
+    my = scope.qtipMy || 'bottom center'
+    at = scope.qtipAt || 'top center'
+    qtipClass = attrs.qtipClass || 'qtip'
+    adjustX = parseInt(scope.qtipAdjustX) || 0
+    adjustY = parseInt(scope.qtipAdjustY) || 0
+    content = scope.qtipContent || scope.qtip
+    event = scope.qtipEvent || 'mouseover'
+    eventOut = scope.qtipEventOut || 'mouseout'
+    fixed = if scope.qtipFixed isnt null then string_to_bool scope.qtipFixed else yes
+    delay = scope.qtipDelay || 100
+    style =
+      classes: qtipClass
+      tip: scope.qtipStyle ? {}
+
+    if scope.qtipEvent is 'false'
+      event = false
+    if scope.qtipEventOut is 'false'
+      eventOut = false
+
+    scope.closeQtip = (e) ->
+      e?.preventDefault?()
+      $('.qtip:visible').qtip 'hide'
+      `void 0`
+
+    generateQtip = (content) ->
+      options =
+        content: content
+        position:
+          my: my
+          at: at
+          target: el
+          adjust:
+            x: adjustX
+            y: adjustY
+        show:
+          event: event
+        hide:
+          fixed: fixed
+          delay: delay
+          event: eventOut
+        style: style
+
+      $(el).qtip options
+
+      if attrs.qtipVisible
+        scope.$watch 'qtipVisible', (new_val) -> $(el).qtip 'toggle', new_val
+
+      if attrs.qtipDisable
+        scope.$watch 'qtipDisable', (new_val) -> $(el).qtip 'disable', new_val
+
+      if attrs.qtipTitle
+        scope.$watch 'qtipTitle', (new_val) -> $(el).qtip 'option', 'content.title', new_val
+
+      scope.$watch 'qtip', (new_val, old_val) -> $(el).qtip 'option', 'content.text', new_val if new_val isnt old_val
+
+    if attrs.qtipSelector
+      $timeout (-> generateQtip $(scope.qtipSelector).html()), 1
+
+    else if attrs.qtipTemplate
+      $http.get scope.qtipTemplate, cache: $templateCache
+      .then (html) ->
+        generateQtip text: ->
+          $timeout ->
+            scope.$apply ->
+              $compile(html.data)(scope)
+          , 1
+
+    else if attrs.qtipTitle
+      generateQtip title: scope.qtipTitle, text: scope.qtip
+
+    else
+      generateQtip text: ->
+        $timeout ->
+          scope.$apply ->
+            $compile("<div>#{content}</div>")(scope)
+        , 1
+
+    `void 0`
+]

angular-qtip.js

@@ -10,6 +10,7 @@
           qtipDelay: '=',
           qtipAdjustX: '=',
           qtipAdjustY: '=',
+          qtipStyle: '=',
           qtip: '@',
           qtipTitle: '@',
           qtipContent: '@',
@@ -22,7 +23,7 @@
           object: '=qtipTemplateObject'
         },
         link: function(scope, el, attrs) {
-          var adjustX, adjustY, at, content, delay, event, eventOut, fixed, generateQtip, my, qtipClass, string_to_bool;
+          var adjustX, adjustY, at, content, delay, event, eventOut, fixed, generateQtip, my, qtipClass, ref, string_to_bool, style;
           string_to_bool = function(str) {
             var ref;
             return !((ref = String(str).toLowerCase()) === 'false' || ref === '0' || ref === 'null');
@@ -37,6 +38,25 @@
           eventOut = scope.qtipEventOut || 'mouseout';
           fixed = scope.qtipFixed !== null ? string_to_bool(scope.qtipFixed) : true;
           delay = scope.qtipDelay || 100;
+          style = {
+            classes: qtipClass,
+            tip: (ref = scope.qtipStyle) != null ? ref : {}
+          };
+          if (scope.qtipEvent === 'false') {
+            event = false;
+          }
+          if (scope.qtipEventOut === 'false') {
+            eventOut = false;
+          }
+          scope.closeQtip = function(e) {
+            if (e != null) {
+              if (typeof e.preventDefault === "function") {
+                e.preventDefault();
+              }
+            }
+            $('.qtip:visible').qtip('hide');
+            return void 0;
+          };
           generateQtip = function(content) {
             var options;
             options = {
@@ -58,7 +78,7 @@
                 delay: delay,
                 event: eventOut
               },
-              style: qtipClass
+              style: style
             };
             $(el).qtip(options);
             if (attrs.qtipVisible) {
@@ -92,9 +112,11 @@
             }).then(function(html) {
               return generateQtip({
                 text: function() {
-                  return scope.$apply(function() {
-                    return $compile(html.data)(scope);
-                  });
+                  return $timeout(function() {
+                    return scope.$apply(function() {
+                      return $compile(html.data)(scope);
+                    });
+                  }, 1);
                 }
               });
             });
@@ -104,17 +126,16 @@
               text: scope.qtip
             });
           } else {
-            generateQtip(content);
-          }
-          scope.closeQtip = function(e) {
-            if (e != null) {
-              if (typeof e.preventDefault === "function") {
-                e.preventDefault();
+            generateQtip({
+              text: function() {
+                return $timeout(function() {
+                  return scope.$apply(function() {
+                    return $compile("<div>" + content + "</div>")(scope);
+                  });
+                }, 1);
               }
-            }
-            $('.qtip:visible').qtip('hide');
-            return void 0;
-          };
+            });
+          }
           return void 0;
         }
       };