Fix transformation for tooltips below elements

frontend/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "ccscan-frontend",
 	"description": "CCDScan frontend",
-	"version": "1.5.25",
+	"version": "1.5.26",
 	"engine": "16",
 	"type": "module",
 	"private": true,

frontend/src/components/atoms/InfoTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-	<Tooltip :text="text">
+	<Tooltip :text="text" :position="position">
 		<svg
 			class="icon"
 			viewBox="0 0 20 20"
@@ -26,9 +26,11 @@
 </template>
 <script lang="ts" setup>
 import Tooltip from '~~/src/components/atoms/Tooltip.vue'
+import { Position } from '~~/src/composables/useTooltip'
 
 type Props = {
 	text: string
+	position?: Position
 }
 defineProps<Props>()
 </script>

frontend/src/components/atoms/TextCopy.vue

@@ -2,6 +2,7 @@
 	<Tooltip
 		:text="statusText || label"
 		:on-mouse-enter="handleOnMouseEnter"
+		:position="position"
 		:text-class="tooltipClass"
 	>
 		<button
@@ -22,13 +23,15 @@
 import { ref } from 'vue'
 import Tooltip from '~/components/atoms/Tooltip.vue'
 import ClipboardIcon from '~/components/icons/ClipboardIcon.vue'
+import { Position } from '~~/src/composables/useTooltip'
 
 type Props = {
 	text: string
 	label: string
 	tooltipClass?: string
 	iconSize?: string
 }
+const position = 'bottom' as Position
 
 const props = defineProps<Props>()
 

frontend/src/components/atoms/Tooltip.vue

@@ -4,30 +4,31 @@
 		@mouseenter="handleOnMouseEnter"
 		@mouseleave="handleOnMouseLeave"
 	>
-		<transition name="tooltip">
-			<span
-				v-show="isVisible"
-				class="text-sm left-1/2 top-0 p-3 rounded-lg z-50 tooltip pointer-events-none"
-				:class="textClass"
-			>
-				{{ text }}
-				<slot name="content" />
-				<span class="tooltip-triangle"></span>
-			</span>
-		</transition>
+		<span
+			v-show="isVisible"
+			class="text-sm left-1/2 p-3 rounded-lg z-50 tooltip pointer-events-none"
+			:class="textClass"
+		>
+			{{ text }}
+			<slot name="content" />
+			<span class="tooltip-triangle"></span>
+		</span>
 		<slot />
 	</span>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useTooltip } from '~/composables/useTooltip'
+import { Position, useTooltip } from '~/composables/useTooltip'
 
 const isVisible = ref(false)
 
 type Props = {
 	text?: string
 	textClass?: string
+	position?: Position
+	x?: string
+	y?: string
 	tooltipPosition?: string
 	onMouseEnter?: () => void
 	onMouseLeave?: () => void
@@ -36,13 +37,14 @@ const props = defineProps<Props>()
 const tooltipPosition = ref(props.tooltipPosition || 'fixed')
 
 const {
+	triangleTopBorder,
 	triangleBottomBorder,
 	trianglePosTop,
-	triangleShift,
 	tooltipX,
 	tooltipY,
+	tooltipTransformYTo,
 	calculateCoordinates,
-} = useTooltip()
+} = useTooltip(props.position, props.x, props.y)
 
 const handleOnMouseEnter = (event: MouseEvent) => {
 	calculateCoordinates(event)
@@ -58,6 +60,7 @@ const handleOnMouseLeave = () => {
 <style>
 .tooltip {
 	background: var(--color-tooltip-bg);
+	transform: translate(-50%, calc(v-bind(tooltipTransformYTo)));
 	top: v-bind(tooltipY);
 	left: v-bind(tooltipX);
 	position: v-bind(tooltipPosition);
@@ -78,11 +81,13 @@ const handleOnMouseLeave = () => {
 	width: 10px;
 	border-width: 0 10px 0;
 	border-color: transparent;
+	border-top: v-bind(triangleTopBorder) solid;
 	border-bottom: v-bind(triangleBottomBorder) solid;
 	border-bottom-color: var(--color-tooltip-bg);
 	border-top-color: var(--color-tooltip-bg);
 	position: absolute;
 	top: v-bind(trianglePosTop);
-	left: v-bind(triangleShift);
+	left: 50%;
+	transform: translate(-10px, 0);
 }
 </style>

frontend/src/composables/useTooltip.ts

@@ -1,40 +1,59 @@
 import { ref } from 'vue'
 
+export type Position = 'top' | 'bottom'
+
 /**
  * Hook to control tooltip position values
  * Returns CSS values for triangle position, tooltip position and animation
  */
-export const useTooltip = () => {
+export const useTooltip = (
+	position: Position = 'top',
+	xOverride?: string,
+	yOverride?: string
+) => {
 	const TOOLTIP_OFFSET = 10
 
 	// Drawing of the triangle
-	const triangleBottomBorder = `${TOOLTIP_OFFSET}px`
+	const triangleTopBorder = position === 'top' ? `${TOOLTIP_OFFSET}px` : 'unset'
+	const triangleBottomBorder =
+		position === 'bottom' ? `${TOOLTIP_OFFSET}px` : 'unset'
 
 	// Positioning of the triangle
-	const trianglePosTop = `-${TOOLTIP_OFFSET}px`
+	const trianglePosTop = position === 'top' ? '100%' : `-${TOOLTIP_OFFSET}px`
 
 	// Positioning of the tooltip
 	const tooltipX = ref('0px')
 	const tooltipY = ref('0px')
-	const triangleShift = ref('0px')
+	const tooltipTransformYTo = ref('0px')
+
 	const calculateCoordinates = (event: MouseEvent) => {
 		// compiler does not know if this is e.g. a SVGElement, on which `target` does not exist
 		const target = event.target as HTMLSpanElement
 
 		const { x, y } = target.getBoundingClientRect()
 
-		tooltipX.value = x + 'px'
-		triangleShift.value = 10 + 'px'
+		tooltipX.value = xOverride || x + 0.5 * target.offsetWidth + 'px'
+
+		tooltipY.value =
+			yOverride ||
+			(position === 'top'
+				? y - 0.5 * target.offsetHeight + TOOLTIP_OFFSET + 'px'
+				: y + 0.5 * target.offsetHeight - TOOLTIP_OFFSET + 'px')
 
-		tooltipY.value = y + target.offsetHeight + TOOLTIP_OFFSET + 'px'
+		// Animation values of the tooltip
+		tooltipTransformYTo.value =
+			position === 'top'
+				? `-100% - ${0.5 * TOOLTIP_OFFSET}px`
+				: target.offsetHeight + TOOLTIP_OFFSET + 'px'
 	}
 
 	return {
+		triangleTopBorder,
 		triangleBottomBorder,
 		trianglePosTop,
-		triangleShift,
 		tooltipX,
 		tooltipY,
+		tooltipTransformYTo,
 		calculateCoordinates,
 	}
 }