Arrow for OverlayPanel

public/themes/luna-amber/theme.css

@@ -3014,6 +3014,20 @@ body .p-overlaypanel .p-overlaypanel-close:hover {
 body .p-overlaypanel .p-overlaypanel-close > span {
   line-height: inherit;
 }
+body .p-overlaypanel:after {
+  border-color: rgba(50, 50, 50, 0);
+  border-bottom-color: #323232;
+}
+body .p-overlaypanel:before {
+  border-color: rgba(25, 25, 25, 0);
+  border-bottom-color: #191919;
+}
+body .p-overlaypanel.p-overlaypanel-flipped:after {
+  border-top-color: #323232;
+}
+body .p-overlaypanel.p-overlaypanel-flipped:before {
+  border-top-color: #191919;
+}
 body .p-dialog {
   padding: 0;
   -moz-border-radius: 3px;

src/components/overlaypanel/OverlayPanel.css

@@ -2,6 +2,12 @@
     padding: 0;
     margin: 0;
     position: absolute;
+    margin-top: 10px;
+}
+
+.p-overlaypanel-flipped {
+    margin-top: 0;
+    margin-bottom: 10px;
 }
 
 .p-overlaypanel-content {
@@ -49,4 +55,38 @@
 .p-overlaypanel-leave-active {
     -webkit-transition: transform .3s, opacity .15s;
     transition: transform .3s, opacity .15s;
+}
+
+.p-overlaypanel:after, .p-overlaypanel:before {
+	bottom: 100%;
+	left: 1.25em;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.p-overlaypanel:after {
+	border-width: 8px;
+	margin-left: -8px;
+}
+
+.p-overlaypanel:before {
+	border-width: 10px;
+	margin-left: -10px;
+}
+
+.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {
+    bottom: auto;
+    top: 100%;
+}
+
+.p-overlaypanel.p-overlaypanel-flipped:after {
+    border-bottom-color: transparent;
+}
+
+.p-overlaypanel.p-overlaypanel-flipped:before {
+    border-bottom-color: transparent
 }

src/components/overlaypanel/OverlayPanel.vue

@@ -81,6 +81,10 @@ export default {
         },
         alignOverlay() {
             DomHandler.absolutePosition(this.$refs.container, this.target);
+
+            if (DomHandler.getOffset(this.$refs.container).top < DomHandler.getOffset(this.target).top) {
+                DomHandler.addClass(this.$refs.container, 'p-overlaypanel-flipped');
+            }
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {