WIP

APP/src/components/popover-msg/popover-msg.component.html

@@ -0,0 +1,10 @@
+<div class="arrow up" *ngIf="bottomEnd">
+  <!-- <div class="inner-arrow-up"></div> -->
+</div>
+<div class="px-3 py-2 d-block box">
+  <span class="symbol">!</span>
+  <span>{{context.message}}</span>
+</div>
+<div class="arrow down" *ngIf="topEnd">
+  <!-- <div class="inner-arrow-up"></div> -->
+</div>

APP/src/components/popover-msg/popover-msg.component.scss

@@ -0,0 +1,61 @@
+$arrow-width: 12;
+$inner-arrow-width: 11;
+$border-color: #808080;
+:host {
+    .arrow {
+        width: 0;
+        height: 0;
+        margin-left: $arrow-width - 2 + px;
+        z-index: 50;
+        border-left: $arrow-width + px solid transparent;
+        border-right: $arrow-width + px solid transparent;
+
+        &.up {
+            border-bottom: $arrow-width + px solid $border-color;
+        }
+        &.down {
+            border-top: $arrow-width + px solid $border-color;
+            margin-top: -1px;
+        }
+
+        &:before {
+            height: $inner-arrow-width + px;
+            display: block;
+            width: $inner-arrow-width + px;
+            border-left: $inner-arrow-width + px solid transparent;
+            border-right: $inner-arrow-width + px solid transparent;
+            margin-left: -$inner-arrow-width + px;
+            position: absolute;
+            content: "";
+        }
+
+        &.up:before {
+            border-bottom: $inner-arrow-width + px solid white;
+            top: 1px;
+        }
+
+        &.down:before {
+            border-top: $inner-arrow-width + px solid white;
+            bottom: 1px;
+        }
+    }
+    .box {
+        background: white;
+        border-radius: 0.25rem;
+        -webkit-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
+        -moz-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
+        box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
+        border: solid $border-color;
+        border-width: 1px;
+        margin-top: -1px;
+    }
+    .symbol {
+        border-radius: 0.2rem;
+        background-color: #ffa300;
+        color: white;
+        padding: 1px 10px;
+        font-size: 16px;
+        font-weight: 900;
+        margin-right: 10px;
+    }
+}

APP/src/components/popover-msg/popover-msg.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PopoverMsgComponent } from './popover-msg.component';
+
+describe('PopoverMsgComponent', () => {
+  let component: PopoverMsgComponent;
+  let fixture: ComponentFixture<PopoverMsgComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PopoverMsgComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopoverMsgComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

APP/src/components/popover-msg/popover-msg.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { NbPositionedContainerComponent, NbRenderableContainer, NbPosition } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-popover-msg',
+  templateUrl: './popover-msg.component.html',
+  styleUrls: ['./popover-msg.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PopoverMsgComponent extends NbPositionedContainerComponent implements NbRenderableContainer {
+  renderContent() {
+    //throw new Error("Method not implemented.");
+  }
+
+  @Input() message: string
+
+  @Input()
+  context: { message?: string, position: NbPosition } = {
+    position: NbPosition.BOTTOM_END
+  };
+  ngOnInit() {
+    this.message = this.context.message;
+    this.position = this.context.position || NbPosition.BOTTOM_END;
+  }
+
+}

APP/src/components/popover-msg/popover-msg.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PopoverMsgComponent } from './popover-msg.component';
+
+@NgModule({
+    declarations: [PopoverMsgComponent],
+    imports: [
+        CommonModule
+    ],
+    exports: [PopoverMsgComponent]
+})
+export class PopoverMsgModule { }