Fixed calback $element,element issue, added new method close, close #35

object505 · Nov 10, 2015 · 5735fc7 · 5735fc7
1 parent 12ddd17
commit 5735fc7
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -83,26 +83,31 @@ To use css3 animation effects please include [Animate.css](http://daneden.github
 	// Hide the tipso tooltip
 	$('.tipso').tipso('hide');
 
+	// Hide/Close the tipso tooltip from inside the tooltip and/or without hideDelay timeout
+	$('.tipso').tipso('close');
+	// or as alternative
+	$('.tipso').tipso('hide', true);
+
 	// Destroy tipso tooltip
 	$('.tipso').tipso('destroy');
 
 	// Add a callback before tipso is shown
 	$('.tipso').tipso({
-		onBeforeShow: function(){
+		onBeforeShow: function ($element, element) {
 			// Your code
 		}
 	});
 
 	// Add a callback when tipso is shown
 	$('.tipso').tipso({
-		onShow: function(){
+		onShow: function ($element, element) {
 			// Your code
 		}
 	});
 
 	// Add a callback when tipso is hidden
 	$('.tipso').tipso({
-		onHide: function(){
+		onHide: function ($element, element) {
 			// Your code
 		}
 	});

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "tipso",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A Lightweight Responsive jQuery Tooltip Plugin",
   "main": ["src/tipso.min.js", "src/tipso.css"],
   "keywords": [

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "mobile",
     "lightweight"
   ],
-  "version": "1.0.7",
+  "version": "1.0.8",
   "author": "Bojan Petkovski (http://object505.com/)",
   "licenses": [
     {

diff --git a/src/tipso.js b/src/tipso.js
@@ -1,5 +1,5 @@
 /*!
- * tipso - A Lightweight Responsive jQuery Tooltip Plugin v1.0.6
+ * tipso - A Lightweight Responsive jQuery Tooltip Plugin v1.0.8
  * Copyright (c) 2014-2015 Bojan Petkovski
  * http://tipso.object505.com
  * Licensed under the MIT license
@@ -40,7 +40,7 @@
       tooltipHover      : false,
       content           : null,
       ajaxContentUrl    : null,
-	  ajaxContentBuffer : 0,
+      ajaxContentBuffer : 0,
       contentElementId  : null,         //Normally used for picking template scripts
       useTitle          : false,        //Use the title tag as tooptip or not
       templateEngineFunc: null,         //A function that compiles and renders the content
@@ -50,7 +50,8 @@
     };
 
   function Plugin(element, options) {
-    this.element = $(element);
+    this.element = element;
+    this.$element = $(this.element);
     this.doc = $(document);
     this.win = $(window);
     this.settings = $.extend({}, defaults, options);
@@ -60,12 +61,12 @@
      * data-tipso is an object then use it as extra settings and if it's not
      * then use it as a title.
      */
-    if (typeof(this.element.data("tipso")) === "object")
+    if (typeof(this.$element.data("tipso")) === "object")
     {
-      $.extend(this.settings, this.element.data("tipso"));
+      $.extend(this.settings, this.$element.data("tipso"));
     }
 
-    var data_keys = Object.keys(this.element.data());
+    var data_keys = Object.keys(this.$element.data());
     var data_attrs = {};
     for (var i = 0; i < data_keys.length; i++)
     {
@@ -76,7 +77,7 @@
       }
       //lowercase first letter
       key = key.charAt(0).toLowerCase() + key.slice(1);
-      data_attrs[key] = this.element.data(data_keys[i]);
+      data_attrs[key] = this.$element.data(data_keys[i]);
 
       //We cannot use extend for data_attrs because they are automatically
       //lowercased. We need to do this manually and extend this.settings with
@@ -92,7 +93,7 @@
 
     this._defaults = defaults;
     this._name = pluginName;
-    this._title = this.element.attr('title');
+    this._title = this.$element.attr('title');
     this.mode = 'hide';
     this.ieFade = !supportsTransitions;
 
@@ -107,7 +108,7 @@
   $.extend(Plugin.prototype, {
     init: function() {
       var obj = this,
-        $e = this.element,
+        $e = this.$element,
         $doc = this.doc;
       $e.addClass('tipso_style').removeAttr('title');
 
@@ -176,7 +177,7 @@
 
       if (obj.mode === 'hide') {
         if ($.isFunction(obj.settings.onBeforeShow)) {
-          obj.settings.onBeforeShow(this.element, this);
+          obj.settings.onBeforeShow(obj.$element, obj.element, obj);
         }
         if (obj.settings.size) {
             tipso_bubble.addClass(obj.settings.size);
@@ -221,7 +222,7 @@
             .speed, function() {
               obj.mode = 'show';
               if ($.isFunction(obj.settings.onShow)) {
-                obj.settings.onShow(this.element, this);
+                obj.settings.onShow(obj.$element, obj.element, obj);
               }
             });
           } else {
@@ -236,18 +237,24 @@
               });
               obj.mode = 'show';
               if ($.isFunction(obj.settings.onShow)) {
-                obj.settings.onShow(this.element, this);
+                obj.settings.onShow(obj.$element, obj.element, obj);
               }
               $win.off('resize' + '.' + pluginName, null, 'tipsoResizeHandler');
             });
           }
         }, obj.settings.delay);
       }
     },
-    hide: function() {
+    hide: function(force) {
       var obj = this,
         $win = this.win,
-        tipso_bubble = this.tooltip();
+        tipso_bubble = this.tooltip(),
+        hideDelay = obj.settings.hideDelay;
+
+      if (force) {
+        hideDelay = 0;
+        obj.mode = 'show';
+      }
 
       window.clearTimeout(obj.timeout);
       obj.timeout = null;
@@ -258,7 +265,7 @@
             function() {
               $(this).remove();
               if ($.isFunction(obj.settings.onHide) && obj.mode === 'show') {
-                obj.settings.onHide(this.element, this);
+                obj.settings.onHide(obj.$element, obj.element, obj);
               }
               obj.mode = 'hide';
               $win.off('resize' + '.' + pluginName, null, 'tipsoResizeHandler');
@@ -271,17 +278,20 @@
             .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
               $(this).removeClass('animated ' + obj.settings.animationOut).remove();
               if ($.isFunction(obj.settings.onHide) && obj.mode === 'show') {
-                obj.settings.onHide(this.element, this);
+                obj.settings.onHide(obj.$element, obj.element, obj);
               }
               obj.mode = 'hide';
               $win.off('resize' + '.' + pluginName, null, 'tipsoResizeHandler');
             });
           }
         }
-      }, obj.settings.hideDelay);
+      }, hideDelay);
+    },
+    close: function() {
+      this.hide(true);
     },
     destroy: function() {
-      var $e = this.element,
+      var $e = this.$element,
         $win = this.win,
         $doc = this.doc;
       $e.off('.' + pluginName);
@@ -291,7 +301,7 @@
     },
     titleContent: function() {
         var content,
-          $e = this.element,
+          $e = this.$element,
           obj = this;
         if (obj.settings.titleContent)
         {
@@ -305,7 +315,7 @@
     },
     content: function() {
       var content,
-        $e = this.element,
+        $e = this.$element,
         obj = this,
         title = this._title;
       if (obj.settings.ajaxContentUrl)
@@ -395,30 +405,26 @@
     return false;
   })();
 
-  function removeCornerClasses(obj)
-  {
+  function removeCornerClasses(obj) {
     obj.removeClass("top_right_corner bottom_right_corner top_left_corner bottom_left_corner");
     obj.find(".tipso_title").removeClass("top_right_corner bottom_right_corner top_left_corner bottom_left_corner");
   }
 
-  function reposition(thisthat)
-  {
+  function reposition(thisthat) {
     var tipso_bubble = thisthat.tooltip(),
-      $e = thisthat.element,
+      $e = thisthat.$element,
       obj = thisthat,
       $win = $(window),
       arrow = 10,
       pos_top, pos_left, diff;
 
     var arrow_color = obj.settings.background;
     var title_content = obj.titleContent();
-    if (title_content !== undefined && title_content !== '')
-    {
+    if (title_content !== undefined && title_content !== '') {
         arrow_color = obj.settings.titleBackground;
     }
 
-    if ( $e.parent().outerWidth() > $win.outerWidth() )
-    {
+    if ($e.parent().outerWidth() > $win.outerWidth()) {
       $win = $e.parent();
     }