diff --git a/src/base/combination/bubble.js b/src/base/combination/bubble.js index cf0548fb1..5177f3020 100644 --- a/src/base/combination/bubble.js +++ b/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] } }); } diff --git a/src/base/combination/combo.js b/src/base/combination/combo.js index d07e75c91..6d26d297b 100644 --- a/src/base/combination/combo.js +++ b/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 diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js index 8ed9e336e..6dc4b0abb 100644 --- a/src/base/layer/layer.popup.js +++ b/src/base/layer/layer.popup.js @@ -4,9 +4,12 @@ * @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" : ""), + _baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""), // 品牌色 primary: false, maxWidth: "auto", @@ -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向上冒泡 @@ -56,12 +60,12 @@ BI.PopupView = BI.inherit(BI.Widget, { "z-index": BI.zIndex_popup, "min-width": BI.isNumeric(o.minWidth) ? (o.minWidth / BI.pixRatio + BI.pixUnit) : o.minWidth, "max-width": BI.isNumeric(o.maxWidth) ? (o.maxWidth / BI.pixRatio + BI.pixUnit) : o.maxWidth - }).bind({ click: fn }); + }).bind({click: fn}); this.element.bind("mousewheel", fn); - o.stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn }); - o.stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop }); + o.stopPropagation && this.element.bind({mousedown: fn, mouseup: fn, mouseover: fn}); + o.stopEvent && this.element.bind({mousedown: stop, mouseup: stop, mouseover: stop}); this.tool = this._createTool(); this.tab = this._createTab(); this.view = this._createView(); @@ -84,25 +88,47 @@ BI.PopupView = BI.inherit(BI.Widget, { bgap: o.bgap, vgap: o.vgap, hgap: o.hgap, - items: BI.LogicFactory.createLogicItemsByDirection(o.direction, - BI.extend({ + items: BI.LogicFactory.createLogicItemsByDirection(o.direction, 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 () { var o = this.options; - this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value }); + this.button_group = BI.createWidget(o.el, {type: "bi.button_group", value: o.value}); this.button_group.element.css({ "min-height": BI.isNumeric(o.minHeight) ? (o.minHeight / BI.pixRatio + BI.pixUnit) : o.minHeight, "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; }, @@ -166,7 +327,7 @@ BI.PopupView = BI.inherit(BI.Widget, { toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0); var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVGap; this.view.resetHeight ? this.view.resetHeight(resetHeight) : - this.view.element.css({ "max-height": resetHeight / BI.pixRatio + BI.pixUnit }); + this.view.element.css({"max-height": resetHeight / BI.pixRatio + BI.pixUnit}); }, setValue: function (selectedValues) { diff --git a/src/case/combo/bubblecombo/combo.bubble.js b/src/case/combo/bubblecombo/combo.bubble.js index 997caff67..b6b6b0f47 100644 --- a/src/case/combo/bubblecombo/combo.bubble.js +++ b/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(); }, diff --git a/src/less/base/view/popupview.less b/src/less/base/view/popupview.less index 96191b06b..cc8387fb7 100644 --- a/src/less/base/view/popupview.less +++ b/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 {