feature: 小三角换一种实现

src/base/combination/bubble.js

@@ -223,17 +223,6 @@
             this.combo = BI.createWidget(this.options.el, {
                 value: this.options.value
             });
-
-            if (this.options.showArrow) {
-                this.arrow = BI.createWidget({
-                    type: "bi.absolute",
-                    cls: "bi-bubble-arrow",
-                    items: [{
-                        type: "bi.layout",
-                        cls: "bubble-arrow"
-                    }]
-                });
-            }
         },
 
         _assertPopupView: function () {
@@ -241,17 +230,9 @@
             if (this.popupView == null) {
                 this.popupView = BI.createWidget(this.options.popup, {
                     type: "bi.bubble_popup_view",
+                    showArrow: o.showArrow,
                     value: o.value
                 }, this);
-                if (this.options.showArrow) {
-                    BI.createWidget({
-                        type: "bi.absolute",
-                        element: this.popupView,
-                        items: [{
-                            el: this.arrow
-                        }]
-                    });
-                }
                 this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
                     if (type === BI.Events.CLICK) {
                         self.combo.setValue(self.getValue());
@@ -360,7 +341,7 @@
                     name: "arrow",
                     options: {
                         padding: 5,
-                        element: this.arrow.element[0]
+                        element: this.popupView.arrow.element[0]
                     }
                 });
             }

src/base/combination/combo.js

@@ -6,8 +6,11 @@
      * @extends BI.Widget
      */
     BI.Combo = BI.inherit(BI.Bubble, {
+        _const: {
+            TRIANGLE_LENGTH: 9
+        },
         _defaultConfig: function () {
-            var conf = BI.Bubble.superclass._defaultConfig.apply(this, arguments);
+            var conf = BI.Combo.superclass._defaultConfig.apply(this, arguments);
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-combo" + (BI.isIE() ? " hack" : ""),
                 attributes: {
@@ -102,27 +105,6 @@
             });
         },
 
-        _assertPopupView: function () {
-            var self = this, o = this.options;
-            if (this.popupView == null) {
-                this.popupView = BI.createWidget(this.options.popup, {
-                    type: "bi.popup_view",
-                    value: o.value
-                }, this);
-                this.popupView.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-                    if (type === BI.Events.CLICK) {
-                        self.combo.setValue(self.getValue());
-                        self.fireEvent(BI.Combo.EVENT_CHANGE, value, obj);
-                    }
-                    self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-                });
-                this.popupView.setVisible(false);
-                BI.nextTick(function () {
-                    self.fireEvent(BI.Combo.EVENT_AFTER_INIT);
-                });
-            }
-        },
-
         _hideView: function (e) {
             var o = this.options;
             this.fireEvent(BI.Combo.EVENT_BEFORE_HIDEVIEW);
@@ -214,69 +196,79 @@
             switch (o.direction) {
                 case "bottom":
                 case "bottom,right":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight, ["bottom", "top", "right", "left"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "right", "left"], o.offsetStyle);
                     break;
                 case "top":
                 case "top,right":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight, ["top", "bottom", "right", "left"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "right", "left"], o.offsetStyle);
                     break;
                 case "left":
                 case "left,bottom":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "bottom", "top"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "bottom", "top"], o.offsetStyle);
                     break;
                 case "right":
                 case "right,bottom":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "bottom", "top"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "bottom", "top"], o.offsetStyle);
                     break;
                 case "top,left":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight, ["top", "bottom", "left", "right"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "left", "right"], o.offsetStyle);
                     break;
                 case "bottom,left":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight, ["bottom", "top", "left", "right"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "left", "right"], o.offsetStyle);
                     break;
                 case "left,top":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "top", "bottom"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "top", "bottom"], o.offsetStyle);
                     break;
                 case "right,top":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "top", "bottom"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "top", "bottom"], o.offsetStyle);
                     break;
                 case "right,innerRight":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], o.offsetStyle);
                     break;
                 case "right,innerLeft":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], o.offsetStyle);
                     break;
                 case "innerRight":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], o.offsetStyle);
                     break;
                 case "innerLeft":
-                    p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength, o.adjustYOffset, o.isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], o.offsetStyle);
+                    p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], o.offsetStyle);
                     break;
                 case "top,custom":
                 case "custom,top":
-                    p = BI.DOM.getTopAdaptPosition(combo, this.popupView, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight);
+                    p = BI.DOM.getTopAdaptPosition(combo, this.popupView, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight);
+                    p.dir = "top";
                     break;
                 case "custom,bottom":
                 case "bottom,custom":
-                    p = BI.DOM.getBottomAdaptPosition(combo, this.popupView, o.adjustYOffset || o.adjustLength, o.isNeedAdjustHeight);
+                    p = BI.DOM.getBottomAdaptPosition(combo, this.popupView, (o.adjustYOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight);
+                    p.dir = "bottom";
                     break;
                 case "left,custom":
                 case "custom,left":
-                    p = BI.DOM.getLeftAdaptPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength);
+                    p = BI.DOM.getLeftAdaptPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0));
                     delete p.top;
                     delete p.adaptHeight;
+                    p.dir = "left";
                     break;
                 case "custom,right":
                 case "right,custom":
-                    p = BI.DOM.getRightAdaptPosition(combo, this.popupView, o.adjustXOffset || o.adjustLength);
+                    p = BI.DOM.getRightAdaptPosition(combo, this.popupView, (o.adjustXOffset || o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0));
                     delete p.top;
                     delete p.adaptHeight;
+                    p.dir = "right";
                     break;
             }
 
             if ("adaptHeight" in p) {
                 this.resetListHeight(p["adaptHeight"]);
             }
+            var width = this.combo.element.outerWidth();
+            var height = this.combo.element.outerHeight();
+            this.popupView.setDirection(p.dir, {
+                width: width,
+                height: height
+            });
             if ("left" in p) {
                 this.popupView.element.css({
                     left: p.left

src/base/layer/layer.popup.js

@@ -4,6 +4,9 @@
  * @extends BI.Widget
  */
 BI.PopupView = BI.inherit(BI.Widget, {
+    _const: {
+        TRIANGLE_LENGTH: 9
+    },
     _defaultConfig: function (props) {
         return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
             _baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""),
@@ -21,6 +24,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
             hgap: 0,
             innerVGap: 0,
             innerHGap: 0,
+            showArrow: true,
             direction: BI.Direction.Top, // 工具栏的方向
             stopEvent: false, // 是否停止mousedown、mouseup事件
             stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡
@@ -84,14 +88,36 @@ BI.PopupView = BI.inherit(BI.Widget, {
             bgap: o.bgap,
             vgap: o.vgap,
             hgap: o.hgap,
-            items: BI.LogicFactory.createLogicItemsByDirection(o.direction,
+            items: BI.LogicFactory.createLogicItemsByDirection(o.direction, BI.extend({
-                BI.extend({
                     cls: "list-view-outer bi-card list-view-shadow" + (o.primary ? " bi-primary" : "")
                 }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
                     items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tool, this.tab, this.view, this.toolbar)
                 })))
             )
         }))));
+        if (o.showArrow) {
+            this.arrow = BI.createWidget({
+                type: "bi.absolute",
+                cls: "bi-bubble-arrow",
+                items: [{
+                    type: "bi.layout",
+                    cls: "bubble-arrow"
+                }]
+            });
+            // 因为三角符号的原因位置变大了，需要占位
+            this.placeholder = BI.createWidget({
+                type: "bi.layout"
+            });
+            BI.createWidget({
+                type: "bi.absolute",
+                element: this,
+                items: [{
+                    el: this.arrow
+                }, {
+                    el: this.placeholder
+                }]
+            });
+        }
     },
 
     _createView: function () {
@@ -102,7 +128,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
             "padding-top": o.innerVGap / BI.pixRatio + BI.pixUnit,
             "padding-bottom": o.innerVGap / BI.pixRatio + BI.pixUnit,
             "padding-left": o.innerHGap / BI.pixRatio + BI.pixUnit,
-            "padding-right": o.innerHGap / BI.pixRatio + BI.pixUnit,
+            "padding-right": o.innerHGap / BI.pixRatio + BI.pixUnit
         });
         return this.button_group;
     },
@@ -147,6 +173,141 @@ BI.PopupView = BI.inherit(BI.Widget, {
         });
     },
 
+    setDirection: function (direction, size) {
+        if (this.options.showArrow) {
+            var style, placeholderStyle;
+            switch (direction) {
+                case "bottom":
+                case "bottom,right":
+                    direction = "bottom";
+                    style = {
+                        left: size.width / 2 - 6
+                    };
+                    placeholderStyle = {
+                        width: size.width,
+                        left: 0,
+                        right: 0,
+                        height: this._const.TRIANGLE_LENGTH,
+                        top: -this._const.TRIANGLE_LENGTH,
+                        bottom: ""
+                    };
+                    break;
+                case "bottom,left":
+                    direction = "bottom";
+                    style = {
+                        right: size.width / 2 - 6
+                    };
+                    placeholderStyle = {
+                        width: size.width,
+                        left: 0,
+                        right: 0,
+                        height: this._const.TRIANGLE_LENGTH,
+                        top: -this._const.TRIANGLE_LENGTH,
+                        bottom: ""
+                    };
+                    break;
+                case "top":
+                case "top,right":
+                    direction = "top";
+                    style = {
+                        left: size.width / 2 - 6
+                    };
+                    placeholderStyle = {
+                        width: size.width,
+                        left: 0,
+                        right: 0,
+                        height: this._const.TRIANGLE_LENGTH,
+                        top: "",
+                        bottom: -this._const.TRIANGLE_LENGTH
+                    };
+                    break;
+                case "top,left":
+                    direction = "top";
+                    style = {
+                        right: size.width / 2 - 6
+                    };
+                    placeholderStyle = {
+                        width: size.width,
+                        left: 0,
+                        right: 0,
+                        height: this._const.TRIANGLE_LENGTH,
+                        top: -this._const.TRIANGLE_LENGTH,
+                        bottom: ""
+                    };
+                    break;
+                case "left":
+                case "left,bottom":
+                    direction = "left";
+                    style = {
+                        top: size.height / 2 - 6
+                    };
+                    placeholderStyle = {
+                        height: size.height,
+                        top: 0,
+                        bottom: 0,
+                        width: this._const.TRIANGLE_LENGTH,
+                        right: -this._const.TRIANGLE_LENGTH,
+                        left: ""
+                    };
+                    break;
+                case "left,top":
+                    direction = "left";
+                    style = {
+                        bottom: size.height / 2 - 6
+                    };
+                    placeholderStyle = {
+                        height: size.height,
+                        top: 0,
+                        bottom: 0,
+                        width: this._const.TRIANGLE_LENGTH,
+                        right: -this._const.TRIANGLE_LENGTH,
+                        left: ""
+                    };
+                    break;
+                case "right":
+                case "right,bottom":
+                    direction = "right";
+                    style = {
+                        top: size.height / 2 - 6
+                    };
+                    placeholderStyle = {
+                        height: size.height,
+                        top: 0,
+                        bottom: 0,
+                        width: this._const.TRIANGLE_LENGTH,
+                        left: -this._const.TRIANGLE_LENGTH,
+                        right: ""
+                    };
+                    break;
+                case "right,top":
+                    direction = "right";
+                    style = {
+                        bottom: size.height / 2 - 6
+                    };
+                    placeholderStyle = {
+                        height: size.height,
+                        top: 0,
+                        bottom: 0,
+                        width: this._const.TRIANGLE_LENGTH,
+                        left: -this._const.TRIANGLE_LENGTH,
+                        right: ""
+                    };
+                    break;
+                case "right,innerRight":
+                    break;
+                case "right,innerLeft":
+                    break;
+                case "innerRight":
+                    break;
+                case "innerLeft":
+                    break;
+            }
+            this.element.removeClass("left").removeClass("right").removeClass("top").removeClass("bottom").addClass(direction);
+            this.arrow.element.css(style);
+            this.placeholder.element.css(placeholderStyle);
+        }
+    },
+
     getView: function () {
         return this.view;
     },

src/case/combo/bubblecombo/combo.bubble.js

@@ -5,9 +5,6 @@
  * @extends BI.Widget
  */
 BI.BubbleCombo = BI.inherit(BI.Widget, {
-    _const: {
-        TRIANGLE_LENGTH: 9
-    },
     _defaultConfig: function () {
         return BI.extend(BI.BubbleCombo.superclass._defaultConfig.apply(this, arguments), {
             baseCls: "bi-bubble-combo",
@@ -49,12 +46,12 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             hideWhenAnotherComboOpen: o.hideWhenAnotherComboOpen,
             isNeedAdjustHeight: o.isNeedAdjustHeight,
             isNeedAdjustWidth: o.isNeedAdjustWidth,
-            adjustLength: this._getAdjustLength(),
             stopPropagation: o.stopPropagation,
             adjustXOffset: 0,
             adjustYOffset: 0,
             hideChecker: o.hideChecker,
             offsetStyle: o.offsetStyle,
+            showArrow: true,
             el: o.el,
             popup: BI.extend({
                 type: "bi.bubble_popup_view",
@@ -82,11 +79,9 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, arguments);
         });
         this.combo.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () {
-            self._showTriangle();
             self.fireEvent(BI.BubbleCombo.EVENT_AFTER_POPUPVIEW, arguments);
         });
         this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () {
-            self._hideTriangle();
             self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_HIDEVIEW, arguments);
         });
         this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
@@ -94,118 +89,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
         });
     },
 
-    _getAdjustLength: function () {
-        return this._const.TRIANGLE_LENGTH + this.options.adjustLength;
-    },
-
-    _createTriangle: function (direction) {
-        var self = this, o = this.options, pos = {}, op = {};
-        var adjustLength = this.options.adjustLength;
-        var offset = this.element.offset();
-        var left = offset.left, right = offset.left + this.element.outerWidth();
-        var top = offset.top, bottom = offset.top + this.element.outerHeight();
-        switch (direction) {
-            case "left":
-                pos = {
-                    top: top,
-                    height: this.element.outerHeight(),
-                    left: left - adjustLength - this._const.TRIANGLE_LENGTH
-                };
-                op = {width: this._const.TRIANGLE_LENGTH};
-                break;
-            case "right":
-                pos = {
-                    top: top,
-                    height: this.element.outerHeight(),
-                    left: right + adjustLength
-                };
-                op = {width: this._const.TRIANGLE_LENGTH};
-                break;
-            case "top":
-                pos = {
-                    left: left,
-                    width: this.element.outerWidth(),
-                    top: top - adjustLength - this._const.TRIANGLE_LENGTH
-                };
-                op = {height: this._const.TRIANGLE_LENGTH};
-                break;
-            case "bottom":
-                pos = {
-                    left: left,
-                    width: this.element.outerWidth(),
-                    top: bottom + adjustLength
-                };
-                op = {height: this._const.TRIANGLE_LENGTH};
-                break;
-            default:
-                break;
-        }
-        this.triangle && this.triangle.destroy();
-        this.triangle = BI.createWidget(op, {
-            type: "bi.center_adapt",
-            scrollable: false,
-            cls: "button-combo-triangle-wrapper",
-            items: [{
-                type: "bi.layout",
-                cls: "bubble-combo-triangle-" + direction + (o.primary ? " bi-primary" : "")
-            }]
-        });
-        pos.el = this.triangle;
-        // 动画结束后再画三角
-        setTimeout(function () {
-            BI.createWidget({
-                type: "bi.absolute",
-                element: self,
-                items: [pos]
-            });
-        }, 200);
-    },
-
-    _createLeftTriangle: function () {
-        this._createTriangle("left");
-    },
-
-    _createRightTriangle: function () {
-        this._createTriangle("right");
-    },
-
-    _createTopTriangle: function () {
-        this._createTriangle("top");
-    },
-
-    _createBottomTriangle: function () {
-        this._createTriangle("bottom");
-    },
-
-    _showTriangle: function () {
-        var pos = this.combo.getPopupPosition();
-        switch (pos.dir) {
-            case "left,top":
-            case "left,bottom":
-                this._createLeftTriangle();
-                break;
-            case "right,top":
-            case "right,bottom":
-                this._createRightTriangle();
-                break;
-            case "top,left":
-            case "top,right":
-                this._createTopTriangle();
-                break;
-            case "bottom,left":
-            case "bottom,right":
-                this._createBottomTriangle();
-                break;
-        }
-    },
-
-    _hideTriangle: function () {
-        this.triangle && this.triangle.destroy();
-        this.triangle = null;
-    },
-
     hideView: function () {
-        this._hideTriangle();
         this.combo && this.combo.hideView();
     },
 

src/less/base/view/popupview.less

@@ -27,7 +27,7 @@
   }
 }
 
-.bi-popup-view[data-popper-placement^='top'] {
+.bi-popup-view[data-popper-placement^='top'], .bi-popup-view.top {
   > .bi-bubble-arrow {
     bottom: -12px;
     > .bubble-arrow {
@@ -35,7 +35,7 @@
     }
   }
 }
-.bi-popup-view[data-popper-placement^='bottom'] {
+.bi-popup-view[data-popper-placement^='bottom'], .bi-popup-view.bottom {
   > .bi-bubble-arrow {
     top: -12px;
     > .bubble-arrow {
@@ -43,7 +43,7 @@
     }
   }
 }
-.bi-popup-view[data-popper-placement^='left'] {
+.bi-popup-view[data-popper-placement^='left'], .bi-popup-view.left {
   > .bi-bubble-arrow {
     right: -12px;
     > .bubble-arrow {
@@ -51,7 +51,7 @@
     }
   }
 }
-.bi-popup-view[data-popper-placement^='right'] {
+.bi-popup-view[data-popper-placement^='right'], .bi-popup-view.right {
   > .bi-bubble-arrow {
     left: -12px;
     > .bubble-arrow {