Adjusting tooltip arrow position, added open and close events. Fixed search tooltip layout.

assets/components/tooltip/tooltip.vue

@@ -19,6 +19,11 @@
 					<div class="tooltip">
 						<slot name="tooltip" />
 					</div>
+
+					<div
+						class="tooltip-arrow"
+						:style="{ transform: `translate3d(${arrowOffset}px, 0, 0)` }"
+					/>
 				</div>
 			</div>
 		</teleport>
@@ -30,19 +35,29 @@ import { nextTick } from 'vue';
 
 function getX(triggerBoundary, tooltipBoundary) {
 	const idealPosition = triggerBoundary.left + (triggerBoundary.width / 2) - (tooltipBoundary.width / 2);
+	const rightEdgeOverflow = Math.max((idealPosition + tooltipBoundary.width) - window.innerWidth, 0);
 
 	// don't overflow left edge
 	if (idealPosition < 0) {
-		return 0;
+		return {
+			tooltipX: 0,
+			arrowOffset: idealPosition,
+		};
 	}
 
 	// don't overflow right edge
-	if (idealPosition + tooltipBoundary.width > window.innerWidth) {
-		return window.innerWidth - tooltipBoundary.width;
+	if (rightEdgeOverflow > 0) {
+		return {
+			tooltipX: window.innerWidth - tooltipBoundary.width,
+			arrowOffset: rightEdgeOverflow,
+		};
 	}
 
 	// position at the center of trigger
-	return idealPosition;
+	return {
+		tooltipX: idealPosition,
+		arrowOffset: 0,
+	};
 }
 
 async function calculate() {
@@ -53,8 +68,11 @@ async function calculate() {
 	const triggerBoundary = this.$refs.trigger.getBoundingClientRect();
 	const tooltipBoundary = this.$refs.tooltip.getBoundingClientRect();
 
+	const { tooltipX, arrowOffset } = this.getX(triggerBoundary, tooltipBoundary);
+
 	this.tooltipY = triggerBoundary.top + triggerBoundary.height;
-	this.tooltipX = this.getX(triggerBoundary, tooltipBoundary);
+	this.tooltipX = tooltipX;
+	this.arrowOffset = arrowOffset;
 }
 
 async function open() {
@@ -66,6 +84,7 @@ async function open() {
 	await nextTick();
 
 	this.calculate();
+	this.$emit('open');
 }
 
 function close() {
@@ -73,6 +92,9 @@ function close() {
 
 	this.tooltipY = 0;
 	this.tooltipX = 0;
+	this.arrowOffset = 0;
+
+	this.$emit('close');
 }
 
 function toggle() {
@@ -100,6 +122,7 @@ export default {
 			opened: false,
 			tooltipX: 0,
 			tooltipY: 0,
+			arrowOffset: 0,
 		};
 	},
 	mounted,
@@ -127,24 +150,24 @@ export default {
 .tooltip-inner {
 	position: relative;
 	box-shadow: 0 0 3px var(--darken-weak);
-
-	&:after {
-		content: '';
-		width: 0;
-		height: 0;
-		position: absolute;
-		top: -.5rem;
-		left: calc(50% - .5rem);
-		border-left: .5rem solid transparent;
-		border-right: .5rem solid transparent;
-		border-bottom: .5rem solid var(--background-light);
-		margin: 0 auto;
-		filter: drop-shadow(0 0 3px var(--darken-weak));
-	}
 }
 
 .tooltip {
 	position: relative;
 	background: var(--background-light);
 }
+
+.tooltip-arrow {
+	content: '';
+	width: 0;
+	height: 0;
+	position: absolute;
+	top: -.5rem;
+	left: calc(50% - .5rem);
+	border-left: .5rem solid transparent;
+	border-right: .5rem solid transparent;
+	border-bottom: .5rem solid var(--background-light);
+	margin: 0 auto;
+	filter: drop-shadow(0 0 3px var(--darken-weak));
+}
 </style>