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

assets/components/header/header.vue

@@ -162,8 +162,8 @@
 			<Tooltip
 				class="search-compact"
 				:open="searching"
-				@show="searching = true"
-				@hide="searching = false"
+				@open="searching = true"
+				@close="searching = false"
 			>
 				<button
 					type="button"
@@ -172,12 +172,14 @@
 					icon="search"
 				/></button>
 
-				<Search
-					slot="tooltip"
-					:searching="searching"
-					class="compact"
-					@search="searching = false"
-				/>
+				<template v-slot:tooltip>
+					<Search
+						:searching="searching"
+						class="compact"
+						@search="searching = false"
+						@click.stop
+					/>
+				</template>
 			</Tooltip>
 		</div>
 	</header>

assets/components/header/search.vue

@@ -27,10 +27,7 @@ async function search() {
 
 function searching(to) {
 	if (to) {
-		setTimeout(() => {
-			// nextTick does not seem to work
-			this.$refs.search.focus();
-		}, 20);
+		this.$refs.search.focus();
 	}
 }
 
@@ -79,12 +76,12 @@ export default {
         padding: 0;
         border: none;
 
-        .search-input {
-            border: solid 1px var(--shadow-hint);
-        }
+		.search-input {
+			padding: .75rem .5rem .75rem .75rem;
+		}
 
         .search-button {
-            padding: 0 .5rem 0 1rem;
+            padding: 1rem 1rem .75rem .25rem;
             margin: 0;
         }
     }

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>