Add popover arrow adjustment

src/popover.ts

@@ -12,7 +12,7 @@ export type Popover = {
 
 type PopoverDOM = {
   wrapper: HTMLElement;
-  tip: HTMLElement;
+  arrow: HTMLElement;
   title: HTMLElement;
   description: HTMLElement;
   footer: HTMLElement;
@@ -47,10 +47,13 @@ export function refreshPopover(element: Element) {
     return;
   }
 
-  const popoverTip = popover.tip;
+  const popoverArrow = popover.arrow;
 
   // const position = calculatePopoverPosition(element);
-  popoverTip?.classList.add("driver-popover-tip-left");
+  popoverArrow?.classList.add(
+    "driver-popover-arrow-side-bottom",
+    "driver-popover-arrow-align-center"
+  );
 }
 
 function calculatePopoverPosition(element: Element) {}
@@ -59,8 +62,8 @@ function createPopover(): PopoverDOM {
   const wrapper = document.createElement("div");
   wrapper.classList.add("driver-popover");
 
-  const tip = document.createElement("div");
-  tip.classList.add("driver-popover-tip");
+  const arrow = document.createElement("div");
+  arrow.classList.add("driver-popover-arrow");
 
   const title = document.createElement("div");
   title.classList.add("driver-popover-title");
@@ -94,14 +97,14 @@ function createPopover(): PopoverDOM {
   footer.appendChild(closeButton);
   footer.appendChild(footerButtons);
 
-  wrapper.appendChild(tip);
+  wrapper.appendChild(arrow);
   wrapper.appendChild(title);
   wrapper.appendChild(description);
   wrapper.appendChild(footer);
 
   return {
     wrapper,
-    tip,
+    arrow,
     title,
     description,
     footer,

src/style.css

@@ -40,16 +40,79 @@
   background-color: #fff;
 }
 
-.driver-popover-tip {
+.driver-popover-arrow {
   content: "";
   position: absolute;
   border: 5px solid #fff;
 }
 
-.driver-popover-tip-left {
-  top: 15px;
+/** Popover Arrow Sides **/
+.driver-popover-arrow-side-left {
   left: 100%;
   border-right-color: transparent;
   border-bottom-color: transparent;
   border-top-color: transparent;
 }
+
+.driver-popover-arrow-side-right {
+  right: 100%;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+  border-top-color: transparent;
+}
+
+.driver-popover-arrow-side-top {
+  top: 100%;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.driver-popover-arrow-side-bottom {
+  bottom: 100%;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  border-right-color: transparent;
+}
+
+.driver-popover-arrow-side-center {
+  display: none;
+}
+
+/* Left/Start + Right/Start */
+.driver-popover-arrow-side-left.driver-popover-arrow-align-start,
+.driver-popover-arrow-side-right.driver-popover-arrow-align-start {
+  top: 15px;
+}
+
+/* Top/Start + Bottom/Start */
+.driver-popover-arrow-side-top.driver-popover-arrow-align-start,
+.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start {
+  left: 15px;
+}
+
+/* End/Left + End/Right */
+.driver-popover-arrow-align-end.driver-popover-arrow-side-left,
+.driver-popover-arrow-align-end.driver-popover-arrow-side-right {
+  bottom: 15px;
+}
+
+/* Top/End + Bottom/End */
+.driver-popover-arrow-side-top.driver-popover-arrow-align-end,
+.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end {
+  right: 15px;
+}
+
+/* Left/Center + Right/Center */
+.driver-popover-arrow-side-left.driver-popover-arrow-align-center,
+.driver-popover-arrow-side-right.driver-popover-arrow-align-center {
+  top: 50%;
+  margin-top: -5px;
+}
+
+/* Top/Center + Bottom/Center */
+.driver-popover-arrow-side-top.driver-popover-arrow-align-center,
+.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center {
+  left: 50%;
+  margin-left: -5px;
+}