diff --git a/bi/base.js b/bi/base.js
index d0d2e5478..4fa651153 100644
--- a/bi/base.js
+++ b/bi/base.js
@@ -3008,6 +3008,19 @@ BI.Combo = BI.inherit(BI.Widget, {
                 e.stopPropagation();
             }
         };
+
+        var enterPopup = false;
+
+        function hide() {
+            if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
+                self._hideView();
+                self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
+                self.fireEvent(BI.Combo.EVENT_COLLAPSE);
+            }
+            self.popupView && self.popupView.element.off("mouseenter." + self.getName()).off("mouseleave." + self.getName());
+            enterPopup = false;
+        }
+
         BI.each(evs, function (i, ev) {
             switch (ev) {
                 case "hover":
@@ -3019,11 +3032,18 @@ BI.Combo = BI.inherit(BI.Widget, {
                         }
                     });
                     self.element.on("mouseleave." + self.getName(), function (e) {
-                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
-                            self._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
-                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
-                        }
+                        self.popupView.element.on("mouseenter." + self.getName(), function (e) {
+                            enterPopup = true;
+                            self.popupView.element.on("mouseleave." + self.getName(), function (e) {
+                                hide();
+                            });
+                            self.popupView.element.off("mouseenter." + self.getName());
+                        });
+                        BI.defer(function () {
+                            if (!enterPopup) {
+                                hide();
+                            }
+                        }, 50);
                     });
                     break;
                 case "click":
@@ -3069,11 +3089,18 @@ BI.Combo = BI.inherit(BI.Widget, {
                         st(e);
                     });
                     self.element.on("mouseleave." + self.getName(), function (e) {
-                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
-                            self._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
-                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
-                        }
+                        self.popupView.element.on("mouseenter." + self.getName(), function (e) {
+                            enterPopup = true;
+                            self.popupView.element.on("mouseleave." + self.getName(), function (e) {
+                                hide();
+                            });
+                            self.popupView.element.off("mouseenter." + self.getName());
+                        });
+                        BI.defer(function () {
+                            if (!enterPopup) {
+                                hide();
+                            }
+                        }, 50);
                     });
                     break;
             }
diff --git a/bi/case.js b/bi/case.js
index 969681289..db11d5778 100644
--- a/bi/case.js
+++ b/bi/case.js
@@ -5260,6 +5260,8 @@ BI.IconCombo = BI.inherit(BI.Widget, {
             type: "bi.combo",
             element: this,
             direction: o.direction,
+            trigger: o.trigger,
+            container: o.container,
             adjustLength: o.adjustLength,
             adjustXOffset: o.adjustXOffset,
             adjustYOffset: o.adjustYOffset,
diff --git a/bi/widget.js b/bi/widget.js
index c6a374bdb..827e92566 100644
--- a/bi/widget.js
+++ b/bi/widget.js
@@ -5800,7 +5800,7 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -6261,7 +6261,7 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -17458,7 +17458,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -17759,7 +17759,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -18024,7 +18024,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
diff --git a/demo/js/case/combo/demo.icon_combo.js b/demo/js/case/combo/demo.icon_combo.js
index 060f0da72..f75004a0f 100644
--- a/demo/js/case/combo/demo.icon_combo.js
+++ b/demo/js/case/combo/demo.icon_combo.js
@@ -15,6 +15,8 @@ Demo.IconCombo = BI.inherit(BI.Widget, {
             type: "bi.horizontal_auto",
             items: [{
                 type: "bi.icon_combo",
+                trigger: "click-hover",
+                container: "body",
                 ref:function(_ref){
                     self.refs=_ref;
                 },
diff --git a/dist/base.js b/dist/base.js
index d0d2e5478..4fa651153 100644
--- a/dist/base.js
+++ b/dist/base.js
@@ -3008,6 +3008,19 @@ BI.Combo = BI.inherit(BI.Widget, {
                 e.stopPropagation();
             }
         };
+
+        var enterPopup = false;
+
+        function hide() {
+            if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
+                self._hideView();
+                self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
+                self.fireEvent(BI.Combo.EVENT_COLLAPSE);
+            }
+            self.popupView && self.popupView.element.off("mouseenter." + self.getName()).off("mouseleave." + self.getName());
+            enterPopup = false;
+        }
+
         BI.each(evs, function (i, ev) {
             switch (ev) {
                 case "hover":
@@ -3019,11 +3032,18 @@ BI.Combo = BI.inherit(BI.Widget, {
                         }
                     });
                     self.element.on("mouseleave." + self.getName(), function (e) {
-                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
-                            self._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
-                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
-                        }
+                        self.popupView.element.on("mouseenter." + self.getName(), function (e) {
+                            enterPopup = true;
+                            self.popupView.element.on("mouseleave." + self.getName(), function (e) {
+                                hide();
+                            });
+                            self.popupView.element.off("mouseenter." + self.getName());
+                        });
+                        BI.defer(function () {
+                            if (!enterPopup) {
+                                hide();
+                            }
+                        }, 50);
                     });
                     break;
                 case "click":
@@ -3069,11 +3089,18 @@ BI.Combo = BI.inherit(BI.Widget, {
                         st(e);
                     });
                     self.element.on("mouseleave." + self.getName(), function (e) {
-                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
-                            self._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
-                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
-                        }
+                        self.popupView.element.on("mouseenter." + self.getName(), function (e) {
+                            enterPopup = true;
+                            self.popupView.element.on("mouseleave." + self.getName(), function (e) {
+                                hide();
+                            });
+                            self.popupView.element.off("mouseenter." + self.getName());
+                        });
+                        BI.defer(function () {
+                            if (!enterPopup) {
+                                hide();
+                            }
+                        }, 50);
                     });
                     break;
             }
diff --git a/dist/bundle.js b/dist/bundle.js
index a2f78e9f5..5a723d18c 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -28751,6 +28751,19 @@ BI.Combo = BI.inherit(BI.Widget, {
                 e.stopPropagation();
             }
         };
+
+        var enterPopup = false;
+
+        function hide() {
+            if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
+                self._hideView();
+                self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
+                self.fireEvent(BI.Combo.EVENT_COLLAPSE);
+            }
+            self.popupView && self.popupView.element.off("mouseenter." + self.getName()).off("mouseleave." + self.getName());
+            enterPopup = false;
+        }
+
         BI.each(evs, function (i, ev) {
             switch (ev) {
                 case "hover":
@@ -28762,11 +28775,18 @@ BI.Combo = BI.inherit(BI.Widget, {
                         }
                     });
                     self.element.on("mouseleave." + self.getName(), function (e) {
-                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
-                            self._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
-                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
-                        }
+                        self.popupView.element.on("mouseenter." + self.getName(), function (e) {
+                            enterPopup = true;
+                            self.popupView.element.on("mouseleave." + self.getName(), function (e) {
+                                hide();
+                            });
+                            self.popupView.element.off("mouseenter." + self.getName());
+                        });
+                        BI.defer(function () {
+                            if (!enterPopup) {
+                                hide();
+                            }
+                        }, 50);
                     });
                     break;
                 case "click":
@@ -28812,11 +28832,18 @@ BI.Combo = BI.inherit(BI.Widget, {
                         st(e);
                     });
                     self.element.on("mouseleave." + self.getName(), function (e) {
-                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
-                            self._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
-                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
-                        }
+                        self.popupView.element.on("mouseenter." + self.getName(), function (e) {
+                            enterPopup = true;
+                            self.popupView.element.on("mouseleave." + self.getName(), function (e) {
+                                hide();
+                            });
+                            self.popupView.element.off("mouseenter." + self.getName());
+                        });
+                        BI.defer(function () {
+                            if (!enterPopup) {
+                                hide();
+                            }
+                        }, 50);
                     });
                     break;
             }
@@ -67628,6 +67655,8 @@ BI.IconCombo = BI.inherit(BI.Widget, {
             type: "bi.combo",
             element: this,
             direction: o.direction,
+            trigger: o.trigger,
+            container: o.container,
             adjustLength: o.adjustLength,
             adjustXOffset: o.adjustXOffset,
             adjustYOffset: o.adjustYOffset,
@@ -80817,7 +80846,7 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -81278,7 +81307,7 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -92475,7 +92504,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -92776,7 +92805,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -93041,7 +93070,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
diff --git a/dist/case.js b/dist/case.js
index 969681289..db11d5778 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -5260,6 +5260,8 @@ BI.IconCombo = BI.inherit(BI.Widget, {
             type: "bi.combo",
             element: this,
             direction: o.direction,
+            trigger: o.trigger,
+            container: o.container,
             adjustLength: o.adjustLength,
             adjustXOffset: o.adjustXOffset,
             adjustYOffset: o.adjustYOffset,
diff --git a/dist/demo.js b/dist/demo.js
index e261b48f9..cc31af03e 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -1734,6 +1734,8 @@ Demo.IconCombo = BI.inherit(BI.Widget, {
             type: "bi.horizontal_auto",
             items: [{
                 type: "bi.icon_combo",
+                trigger: "click-hover",
+                container: "body",
                 ref:function(_ref){
                     self.refs=_ref;
                 },
diff --git a/dist/widget.js b/dist/widget.js
index c6a374bdb..827e92566 100644
--- a/dist/widget.js
+++ b/dist/widget.js
@@ -5800,7 +5800,7 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -6261,7 +6261,7 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -17458,7 +17458,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -17759,7 +17759,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
@@ -18024,7 +18024,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
diff --git a/src/base/combination/combo.js b/src/base/combination/combo.js
index 9526764ff..14d892a1f 100644
--- a/src/base/combination/combo.js
+++ b/src/base/combination/combo.js
@@ -105,6 +105,19 @@ BI.Combo = BI.inherit(BI.Widget, {
                 e.stopPropagation();
             }
         };
+
+        var enterPopup = false;
+
+        function hide() {
+            if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
+                self._hideView();
+                self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
+                self.fireEvent(BI.Combo.EVENT_COLLAPSE);
+            }
+            self.popupView && self.popupView.element.off("mouseenter." + self.getName()).off("mouseleave." + self.getName());
+            enterPopup = false;
+        }
+
         BI.each(evs, function (i, ev) {
             switch (ev) {
                 case "hover":
@@ -116,11 +129,18 @@ BI.Combo = BI.inherit(BI.Widget, {
                         }
                     });
                     self.element.on("mouseleave." + self.getName(), function (e) {
-                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
-                            self._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
-                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
-                        }
+                        self.popupView.element.on("mouseenter." + self.getName(), function (e) {
+                            enterPopup = true;
+                            self.popupView.element.on("mouseleave." + self.getName(), function (e) {
+                                hide();
+                            });
+                            self.popupView.element.off("mouseenter." + self.getName());
+                        });
+                        BI.defer(function () {
+                            if (!enterPopup) {
+                                hide();
+                            }
+                        }, 50);
                     });
                     break;
                 case "click":
@@ -166,11 +186,18 @@ BI.Combo = BI.inherit(BI.Widget, {
                         st(e);
                     });
                     self.element.on("mouseleave." + self.getName(), function (e) {
-                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
-                            self._hideView();
-                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
-                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
-                        }
+                        self.popupView.element.on("mouseenter." + self.getName(), function (e) {
+                            enterPopup = true;
+                            self.popupView.element.on("mouseleave." + self.getName(), function (e) {
+                                hide();
+                            });
+                            self.popupView.element.off("mouseenter." + self.getName());
+                        });
+                        BI.defer(function () {
+                            if (!enterPopup) {
+                                hide();
+                            }
+                        }, 50);
                     });
                     break;
             }
diff --git a/src/case/combo/iconcombo/combo.icon.js b/src/case/combo/iconcombo/combo.icon.js
index 75666fc6c..96a022d58 100644
--- a/src/case/combo/iconcombo/combo.icon.js
+++ b/src/case/combo/iconcombo/combo.icon.js
@@ -55,6 +55,8 @@ BI.IconCombo = BI.inherit(BI.Widget, {
             type: "bi.combo",
             element: this,
             direction: o.direction,
+            trigger: o.trigger,
+            container: o.container,
             adjustLength: o.adjustLength,
             adjustXOffset: o.adjustXOffset,
             adjustYOffset: o.adjustYOffset,
diff --git a/src/widget/intervalslider/intervalslider.js b/src/widget/intervalslider/intervalslider.js
index 22a86df3c..20a68beb7 100644
--- a/src/widget/intervalslider/intervalslider.js
+++ b/src/widget/intervalslider/intervalslider.js
@@ -194,7 +194,7 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
diff --git a/src/widget/intervalslider/intervalslider.label.js b/src/widget/intervalslider/intervalslider.label.js
index 3b14acd59..0737729a5 100644
--- a/src/widget/intervalslider/intervalslider.label.js
+++ b/src/widget/intervalslider/intervalslider.label.js
@@ -157,7 +157,7 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
diff --git a/src/widget/singleslider/singleslider.js b/src/widget/singleslider/singleslider.js
index 2a1c18e44..80b0c0e00 100644
--- a/src/widget/singleslider/singleslider.js
+++ b/src/widget/singleslider/singleslider.js
@@ -188,7 +188,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
diff --git a/src/widget/singleslider/singleslider.label.js b/src/widget/singleslider/singleslider.label.js
index 26fed84ed..d963cb794 100644
--- a/src/widget/singleslider/singleslider.label.js
+++ b/src/widget/singleslider/singleslider.label.js
@@ -169,7 +169,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
 
diff --git a/src/widget/singleslider/singleslider.normal.js b/src/widget/singleslider/singleslider.normal.js
index cc7ae0292..26aaced4b 100644
--- a/src/widget/singleslider/singleslider.normal.js
+++ b/src/widget/singleslider/singleslider.normal.js
@@ -134,7 +134,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         });
 
         function optimizeSize(s) {
-            return BI.clamp(s, 0, o.width);
+            return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },