Added support for custom components in tooltips

src/components/features/Achievement.vue

@@ -1,5 +1,5 @@
 <template>
-	<tooltip v-if="achievement.unlocked" :text="tooltip">
+	<tooltip v-if="achievement.unlocked" :display="tooltip">
 		<div :style="style"
 			:class="{ [layer || tab.layer]: true, feature: true, achievement: true, locked: !achievement.earned,
 				bought: achievement.earned }">

src/components/features/RespecButton.vue

@@ -1,6 +1,6 @@
 <template>
 	<div style="display: flex">
-		<tooltip text="Disable respec confirmation">
+		<tooltip display="Disable respec confirmation">
 			<Toggle :value="confirmRespec" @change="setConfirmRespec" />
 		</tooltip>
 		<button @click="respec" :class="{ feature: true, respec: true, can: unlocked, locked: !unlocked }"

src/components/fields/Slider.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="field">
 		<span class="field-title" v-if="title">{{ title }}</span>
-		<tooltip :text="`${value}`" :class="{ fullWidth: !title }">
+		<tooltip :display="`${value}`" :class="{ fullWidth: !title }">
 			<input type="range" :value="value" @input="e => $emit('change', parseInt(e.target.value))" :min="min" :max="max" />
 		</tooltip>
 	</div>

src/components/system/Nav.vue

@@ -3,7 +3,7 @@
 		<div class="nav" v-if="useHeader">
 			<img v-if="banner" :src="banner" height="100%" :alt="title" />
 			<div v-else class="title">{{ title }}</div>
-			<div class="version" @click="openDialog('Changelog')">v{{ version }}</div>
+			<tooltip display="Changelog" bottom><div class="version" @click="openDialog('Changelog')">v{{ version }}</div></tooltip>
 			<div style="flex-grow: 1"></div>
 			<div class="discord">
 				<img src="images/discord.png" @click="window.open(discordLink, 'mywindow')" />
@@ -16,9 +16,15 @@
 					<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li>
 				</ul>
 			</div>
+			<tooltip display="<span>Info</span>" bottom yoffset="4px">
 				<div class="info" @click="openDialog('Info')"><br/>i</div>
-			<img class="options" src="images/options_wheel.png" @click="openDialog('Saves')" />
+			</tooltip>
+			<tooltip display="Saves" bottom xoffset="-24px" style="margin-top: 6px">
+				<div class="material-icons saves" @click="openDialog('Saves')">library_books</div>
+			</tooltip>
+			<tooltip display="<span>Options</span>" bottom xoffset="-64px" yoffset="-8px">
 				<img class="options" src="images/options_wheel.png" @click="openDialog('Options')" />
+			</tooltip>
 		</div>
 		<div v-else>
 			<div class="discord overlay">
@@ -33,9 +39,18 @@
 				</ul>
 			</div>
 			<div class="info overlay" @click="openDialog('Info')"><br/>i</div>
+			<tooltip display="<span>Info</span>" right>
 				<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Saves')" />
+			</tooltip>
+			<tooltip display="Saves" right>
+				<div class="material-icons saves overlay" @click="openDialog('Saves')">library_books</div>
+			</tooltip>
+			<tooltip display="<span>Options</span>" right>
 				<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Options')" />
+			</tooltip>
+			<tooltip display="Changelog" right>
 				<div class="version overlay" @click="openDialog('Changelog')">v{{ version }}</div>
+			</tooltip>
 		</div>
 		<Info :show="showInfo" @openDialog="openDialog" @closeDialog="closeDialog" />
 		<SavesManager :show="showSaves" @closeDialog="closeDialog" />
@@ -68,6 +83,7 @@ export default {
 		},
 		openDialog(dialog) {
 			this[`show${dialog}`] = true;
+			console.log(`show${dialog}`, this[`show${dialog}`]);
 		},
 		closeDialog(dialog) {
 			this[`show${dialog}`] = false;
@@ -166,6 +182,17 @@ export default {
 			-3px 0 12px var(--link);
 	}
 
+	.saves {
+		font-size: 36px;
+		cursor: pointer;
+	}
+
+	.saves:hover {
+		transform: scale(1.2, 1.2);
+		text-shadow: 5px 0 10px var(--color),
+			-3px 0 12px var(--color);
+	}
+
 	.options {
 		height: 50px;
 		width: 50px;
@@ -184,9 +211,6 @@ export default {
 	}
 
 	.version {
-		margin-left: 12px;
-		margin-right: 12px;
-		margin-bottom: 5px;
 		color: var(--points);
 		cursor: pointer;
 	}
@@ -201,4 +225,10 @@ export default {
 		transform: scale(1.2, 1.2);
 		text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points);
 	}
+
+	.nav > .title + .tooltip-container {
+		margin-left: 12px;
+		margin-right: 12px;
+		margin-bottom: 5px;
+	}
 </style>

src/components/system/Tooltip.vue

@@ -1,115 +1,143 @@
 <template>
-	<div :tooltip="text">
+	<div class="tooltip-container" :class="{ force }">
+		<div class="tooltip" :class="{ top, left, right, bottom }"
+		:style="{ '--xoffset': xoffset, '--yoffset': yoffset }">
+			<component :is="tooltipDisplay" />
+		</div>
 		<slot />
 	</div>
 </template>
 
 <script>
+import { coerceComponent } from '../../util/vue';
+
 export default {
 	name: 'tooltip',
 	props: {
-		text: String
+		force: Boolean,
+		display: String,
+		top: Boolean,
+		left: Boolean,
+		right: Boolean,
+		bottom: Boolean,
+		xoffset: String,
+		yoffset: String
+	},
+	computed: {
+		tooltipDisplay() {
+			return coerceComponent(this.display);
+		}
+	},
+	provide: {
+		tab() {
+			return {};
+		}
 	}
 };
 </script>
 
 <style scoped>
-[tooltip] {
+.tooltip-container {
     position: relative;
+	--xoffset: 0px;
+	--yoffset: 0px;
 }
 
-[tooltip]:before,
+.tooltip, .tooltip::after {
-[tooltip]:after {
-	visibility: hidden;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
-	opacity: 0;
 	pointer-events: none;
-	white-space: pre-wrap;
+	position: absolute;
+}
+
+.tooltip {
+    text-align: center;
+    width: 150px;
+    font-size: 14px;
+    line-height: 1.2;
+    bottom: calc(100% + var(--yoffset));
+    left: calc(50% + var(--xoffset));
+    margin-bottom: 5px;
+    transform: translateX(-50%);
+    padding: 7px;
+    border-radius: 3px;
+    opacity: 0;
+    background-color: var(--background-tooltip);
+    color: var(--points);
+}
+
+.tooltip-container:hover,
+.force {
+	z-index: 1;
+}
+
+.tooltip-container:hover > .tooltip,
+.force > .tooltip {
+	opacity: 1;
 	z-index: 100 !important;
 }
 
-[tooltip]:before {
+.tooltip::after {
-	position: absolute;
-	bottom: 100%;
-	left: 50%;
-	margin-bottom: 5px;
-	margin-left: -80px;
-	padding: 7px;
-	width: 160px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
-	background-color: var(--background-tooltip);
-	color: var(--points);
-	content: attr(tooltip);
-	text-align: center;
-	font-size: 14px;
-	line-height: 1.2;
-	white-space: pre-wrap;
-}
-
-[tooltip]:after {
-	position: absolute;
-	bottom: 100%;
-	left: 50%;
-	margin-left: -5px;
-	width: 0;
-	border-top: 5px solid var(--background-tooltip);
-	border-right: 5px solid transparent;
-	border-left: 5px solid transparent;
 	content: " ";
-	font-size: 0;
+	position: absolute;
-	line-height: 0;
+	top: 100%;
-	white-space: pre-wrap;
+	bottom: 100%;
+	left: calc(50% - var(--xoffset));
+	width: 0;
+	margin-left: -5px;
+	border-width: 5px;
+	border-style: solid;
+	border-color: var(--background-tooltip) transparent transparent transparent;
 }
 
-[tooltip]:hover:before,
+.tooltip.left,
-[tooltip].forceTooltip:before,
+.side-nodes .tooltip:not(.right):not(.bottom):not(.top) {
-[tooltip]:hover:after,
+	bottom: calc(50% + var(--yoffset));
-[tooltip].forceTooltip:after {
-	animation: tooltip 0.25s linear 1;
-	animation-fill-mode: forwards;
-	white-space: pre-wrap;
-}
-
-@keyframes tooltip {
-	0% {
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-		filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
-		opacity: 0;
-		visibility: hidden;
-	}
-	100% {
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-		filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
-		opacity: 1;
-		visibility: visible;
-	}
-}
-
-.tooltip-left[tooltip]:before,
-.side-nodes [tooltip]:before {
-	bottom: unset;
 	left: unset;
-	right: 100%;
+	right: calc(100% + var(--xoffset));
-	top: 50%;
-	margin-left: unset;
 	margin-bottom: unset;
 	margin-right: 5px;
-    transform: translateY(-50%);
+    transform: translateY(50%);
 }
 
-.tooltip-left[tooltip]:after,
+.tooltip.left::after,
-.side-nodes [tooltip]:after {
+.side-nodes .tooltip:not(.right):not(.bottom):not(.top)::after {
+	top: calc(50% + var(--yoffset));
 	bottom: unset;
-	left: unset;
+	left: 100%;
 	right: 100%;
-	top: 50%;
+	margin-left: unset;
-    transform: translateY(-50%);
+	margin-top: -5px;
-    border-left: 5px solid var(--background-tooltip);
+	border-color: transparent transparent transparent var(--background-tooltip);
-    border-top: 5px solid transparent;
+}
-    border-bottom: 5px solid transparent;
+
-    border-right: unset;
+.tooltip.right {
+	bottom: calc(50% + var(--yoffset));
+	left: calc(100% + var(--xoffset));
+	margin-bottom: unset;
+	margin-left: 5px;
+    transform: translateY(50%);
+}
+
+.tooltip.right::after {
+	top: calc(50% + var(--yoffset));
+	left: 0;
+	right: 100%;
+	margin-left: -10px;
+	margin-top: -5px;
+	border-color: transparent var(--background-tooltip) transparent transparent;
+}
+
+.tooltip.bottom {
+	top: calc(100% + var(--yoffset));
+	bottom: unset;
+	left: calc(50% + var(--xoffset));
+	margin-bottom: unset;
+	margin-top: 5px;
+    transform: translateX(-50%);
+}
+
+.tooltip.bottom::after {
+	top: 0;
+	margin-top: -10px;
+	border-color: transparent transparent var(--background-tooltip) transparent;
 }
 </style>

src/components/tree/Branches.vue

@@ -95,7 +95,7 @@ svg,
 	left: 0;
 	width: 100%;
 	height: 100%;
-	z-index: -1;
+	z-index: -10;
 	pointer-events: none;
 }
 </style>

src/components/tree/TreeNode.vue

@@ -1,6 +1,5 @@
 <template>
-	<tooltip :text="tooltip" :class="{
+	<tooltip :display="tooltip" :force="forceTooltip" :class="{
-			forceTooltip,
 			ghost: layer.layerShown === 'ghost',
 			treeNode: true,
 			[id]: true,