Improved tooltip performance

src/components/system/Tooltip.vue

@@ -1,10 +1,13 @@
 <template>
-	<div class="tooltip-container" :class="{ force }">
+	<div class="tooltip-container" :class="{ shown }" @mouseenter="setHover(true)" @mouseleave="setHover(false)">
-		<div class="tooltip" :class="{ top, left, right, bottom }"
-		:style="{ '--xoffset': xoffset, '--yoffset': yoffset }">
-			<component :is="tooltipDisplay" />
-		</div>
 		<slot />
+		<!-- Make sure slot is *before* the transition in case the slot uses v-frag, which messes up the tooltip -->
+		<transition name="fade">
+			<div v-if="shown" class="tooltip" :class="{ top, left, right, bottom }"
+				:style="{ '--xoffset': xoffset, '--yoffset': yoffset }">
+				<component :is="tooltipDisplay" />
+			</div>
+		</transition>
 	</div>
 </template>
 
@@ -13,6 +16,11 @@ import { coerceComponent } from '../../util/vue';
 
 export default {
 	name: 'tooltip',
+	data() {
+		return {
+			hover: false
+		};
+	},
 	props: {
 		force: Boolean,
 		display: String,
@@ -26,12 +34,20 @@ export default {
 	computed: {
 		tooltipDisplay() {
 			return coerceComponent(this.display);
+		},
+		shown() {
+			return this.force || this.hover;
 		}
 	},
 	provide: {
 		tab() {
 			return {};
 		}
+	},
+	methods: {
+		setHover(hover) {
+			this.hover = hover;
+		}
 	}
 };
 </script>
@@ -59,20 +75,17 @@ export default {
     transform: translateX(-50%);
     padding: 7px;
     border-radius: 3px;
-    opacity: 0;
     background-color: var(--background-tooltip);
     color: var(--points);
+	z-index: 100 !important;
 }
 
-.tooltip-container:hover,
+.shown {
-.force {
 	z-index: 1;
 }
 
-.tooltip-container:hover > .tooltip,
+.fade-enter, .fade-leave-to {
-.force > .tooltip {
+    opacity: 0;
-	opacity: 1;
-	z-index: 100 !important;
 }
 
 .tooltip::after {

src/components/tree/TreeNode.vue

@@ -24,7 +24,6 @@
 import { layers } from '../../store/layers';
 import { player } from '../../store/proxies';
 import { coerceComponent } from '../../util/vue';
-import { formatWhole } from '../../util/bignum';
 
 export default {
 	name: 'tree-node',
@@ -73,10 +72,10 @@ export default {
 				}
 			}
 			if (player[this.id].unlocked) {
-				return this.layer.tooltip || `${formatWhole(player[this.id].points)} ${this.layer.resource}`;
+				return this.layer.tooltip || `{{ formatWhole(player.${this.id}.points) }} {{ layers.${this.id}.resource }}`;
 			} else {
 				return this.layer.tooltipLocked ||
-					`Reach ${formatWhole(this.layer.requires)} ${this.layer.baseResource} to unlock (You have ${formatWhole(this.layer.baseAmount)} ${this.layer.baseResource})`;
+					`Reach {{ formatWhole(layers.${this.id}.requires) }} {{ layers.${this.id}.baseResource }} to unlock (You have {{ formatWhole(layers.${this.id}.baseAmount) }} {{ layers.${this.id}.baseResource }})`;
 			}
 		},
 		components() {