diff --git a/lib/charts/bubble.js b/lib/charts/bubble.js
index bb83b6d..c14c893 100644
--- a/lib/charts/bubble.js
+++ b/lib/charts/bubble.js
@@ -63,7 +63,16 @@
                 "margin": "auto",
                 "color": "#ffffff"
             };
-            this.formatter.tipFormat = function (key, index) {
+
+            /**
+             * @param {String} key 关键字
+             * @param {Number} x0 横轴值
+             * @param {Number} y0 纵轴值
+             * @param {Number} r0 半径值
+             * @param {Number} c0 分组值
+             * @param {String} time 时间值 
+             */
+            this.formatter.tipFormat = function (key, x0, y0, r0, c0, time) {
                 var tpl = '<b>' + this.keyDimen + ':{key}</b><br />' + 
                     '<b>' + this.xDimen + ':{xDimen}</b><br/>' +
                     '<b>' + this.yDimen + ':{yDimen}</b><br/>' +
@@ -71,19 +80,12 @@
                     '<b>' + this.colorDimen + ':{colorDimen}</b><br/>' + 
                     '<b>' + this.timeDimen + ':{timeDimen}</b>';
 
-                var timeKeys = this.timeKeys;
-                var value = timeKeys[index];
-                var x0 = this.interpolateData(value, timeKeys, this.getKeyData(this.xDimen, key)),
-                    y0 = this.interpolateData(value, timeKeys, this.getKeyData(this.yDimen, key)),
-                    r0 = this.interpolateData(value, timeKeys, this.getKeyData(this.sizeDimen, key)),
-                    c0 = this.getColorData(key);
-
                 var tip = tpl.replace('{key}', key);
                 tip = tip.replace('{xDimen}', x0);
                 tip = tip.replace('{yDimen}', y0);
                 tip = tip.replace('{sizeDimen}', r0);
                 tip = tip.replace('{colorDimen}', c0);
-                tip = tip.replace('{timeDimen}', this.times[value]);
+                tip = tip.replace('{timeDimen}', time);
                 return tip;
             };
 
@@ -92,6 +94,17 @@
         }
     });
 
+    Bubble.prototype.getTip = function (key, index) {
+        var timeKeys = this.timeKeys;
+        var value = timeKeys[index];
+        var x = this.interpolateData(value, timeKeys, this.getKeyData(this.xDimen, key)),
+            y = this.interpolateData(value, timeKeys, this.getKeyData(this.yDimen, key)),
+            size = this.interpolateData(value, timeKeys, this.getKeyData(this.sizeDimen, key)),
+            color = this.getColorData(key);
+        var formatter = this.getFormatter("tipFormat");
+        return formatter.call(this, key, x, y, size, color, this.times[value]);
+    };
+
     /**
      * Creates a backCanvas for the visualization
      */
@@ -251,7 +264,6 @@
 
         // add interaction for colorbar
         this.interactionType = null;
-        that = this;
         rectBn.forEach(function (d) {
             d.hover(function () {
                 if (!that.interval) {
@@ -480,7 +492,6 @@
             dotBubbleSet = [];
 
         var that = this;
-        var tipFormat = that.getFormatter("tipFormat");
         if (time < this.times.length - 1) {
             this.startTime = time;
         } else {
@@ -515,12 +526,6 @@
         }
 
         var floatTag = this.floatTag;
-        var tpl = '<b>' + that.keyDimen + ':{key}</b><br/><b>' +
-            that.xDimen + ':{xDimen}</b><br/><b>' +
-            that.yDimen + ':{yDimen}</b><br/><b>' +
-            that.sizeDimen + ':{sizeDimen}</b><br/><b>' +
-            that.colorDimen + ':{colorDimen}</b><br/><b>' +
-            that.timeDimen + ':{timeDimen}</b>';
 
         // control the time label
         var label = foreCanvas.text(20, margin[0] + realHeight + 15, this.times[time.toFixed(0)]);
@@ -543,46 +548,41 @@
 
         // add hover and click effect for all circles
         dotBubbleSet.forEach(function (d, i) {
-            var tip = tpl.replace('{key}', dots[i].key);
-            tip = tip.replace('{xDimen}', dots[i].x0);
-            tip = tip.replace('{yDimen}', dots[i].y0);
-            tip = tip.replace('{sizeDimen}', dots[i].r0);
-            tip = tip.replace('{colorDimen}', dots[i].c0);
-            tip = tip.replace('{timeDimen}', time);
-
-            d.hover(function () {
-                floatTag.html(tip).css(conf.tipStyle);
-                floatTag.css({"visibility" : "visible"});
-                if (!that.choose) {
-                    d.attr({"stroke-width": 1, "stroke": "#f00", "fill-opacity": 0.8});
-                    meshes.attr({"stroke": "#d6d6d6", "stroke-dasharray": "-", "stroke-width": 1});
-                    for (var j = 0, l = dotBubbleSet.length; j < l ; j++) {
-                        if (j !== i) {
-                           dotBubbleSet[j].attr({"stroke-width": 0, "fill-opacity": 0.2});
+            (function (i) {
+                d.hover(function () {
+                    floatTag.html(that.getTip(that.keys[i], Math.floor(time))).css(conf.tipStyle);
+                    floatTag.css({"visibility" : "visible"});
+                    if (!that.choose) {
+                        d.attr({"stroke-width": 1, "stroke": "#f00", "fill-opacity": 0.8});
+                        meshes.attr({"stroke": "#d6d6d6", "stroke-dasharray": "-", "stroke-width": 1});
+                        for (var j = 0, l = dotBubbleSet.length; j < l ; j++) {
+                            if (j !== i) {
+                               dotBubbleSet[j].attr({"stroke-width": 0, "fill-opacity": 0.2});
+                            }
                         }
                     }
-                }
-            }, function () {
-                floatTag.css({"visibility" : "hidden"});
-                if (!that.choose) {
-                    d.attr({"stroke-width": 0, "fill-opacity": 0.5});
-                    meshes.attr({"stroke": "#ebebeb", "stroke-dasharray": "-", "stroke-width": 1});
-                    for (var j = 0, l = dotBubbleSet.length; j < l ; j++) {
-                        if (j !== i) {
-                           dotBubbleSet[j].attr({"stroke-width": 0, "fill-opacity": 0.5});
+                }, function () {
+                    floatTag.css({"visibility" : "hidden"});
+                    if (!that.choose) {
+                        d.attr({"stroke-width": 0, "fill-opacity": 0.5});
+                        meshes.attr({"stroke": "#ebebeb", "stroke-dasharray": "-", "stroke-width": 1});
+                        for (var j = 0, l = dotBubbleSet.length; j < l ; j++) {
+                            if (j !== i) {
+                               dotBubbleSet[j].attr({"stroke-width": 0, "fill-opacity": 0.5});
+                            }
                         }
                     }
-                }
-            });
+                });
 
-            d.click(function() {
-                if (time === Math.ceil(time)) {
-                    drawAllTime(this.data("key"), i);
-                } else {
-                    drawAllTime(this.data("key"), i);
-                    this.remove();
-                }
-            });
+                d.click(function() {
+                    if (time === Math.ceil(time)) {
+                        drawAllTime(this.data("key"), i);
+                    } else {
+                        drawAllTime(this.data("key"), i);
+                        this.remove();
+                    }
+                });
+            }(i));
         });
 
         // colorbar interaction for showing all same color history data
@@ -626,7 +626,7 @@
                         if (timeKeys[i] === Math.ceil(time)) {
                             historyBubble.attr({"stroke-width": 1, "stroke": "#f00"});
                             historyBubble.hover(function () {
-                                floatTag.html(tipFormat.call(that, key, i)).css(conf.tipStyle);
+                                floatTag.html(that.getTip(key, i)).css(conf.tipStyle);
                                 floatTag.css({"visibility" : "visible"});
                             }, function () {
                                 floatTag.css({"visibility" : "hidden"});
@@ -634,7 +634,7 @@
                         } else {
                             historyBubble.hover(function () {
                                 this.attr({"stroke-width": 1, "stroke": "#f00"});
-                                floatTag.html(tipFormat.call(that, key, i)).css(conf.tipStyle);
+                                floatTag.html(that.getTip(key, i)).css(conf.tipStyle);
                                 floatTag.css({"visibility" : "visible"});
                             }, function () {
                                 this.attr({"stroke-width": 0});
@@ -685,7 +685,7 @@
                                 that.generatePaths(Math.ceil(time));
                             });
                             skeletonCircle.hover(function () {
-                                floatTag.html(tipFormat.call(that, key, i)).css(conf.tipStyle);
+                                floatTag.html(that.getTip(key, i)).css(conf.tipStyle);
                                 floatTag.css({"visibility" : "visible"});
                                 skeletonCircleSet.attr({"fill-opacity": 0.35});
                                 this.attr({"fill-opacity": 1, "r": 5});
@@ -700,7 +700,7 @@
                             });
                         } else {
                             skeletonCircle.hover(function () {
-                                floatTag.html(tipFormat.call(that, key, i)).css(conf.tipStyle);
+                                floatTag.html(that.getTip(key, i)).css(conf.tipStyle);
                                 floatTag.css({"visibility" : "visible"});
                                 skeletonCircleSet.attr({"fill-opacity": 0.35});
                                 this.attr({"fill-opacity": 1, "r": 5});