Tooltip rework!

changelog.md

@@ -1,5 +1,6 @@
 # The Modding Tree changelog:
 
+- Completely reworked tooltips. Shift-click a node to force its tooltip to stay displayed. (And hopefully finally fixed flickering!)
 - Added 2 new input components, text-input and slider.
 - The red layer highlight will not appear before a layer is unlocked.
 

js/components.js

@@ -439,6 +439,7 @@ function loadVue() {
 	Vue.component('overlay-head', systemComponents['overlay-head'])
 	Vue.component('info-tab', systemComponents['info-tab'])
 	Vue.component('options-tab', systemComponents['options-tab'])
+	Vue.component('tooltip', systemComponents['tooltip'])
 
 
 	app = new Vue({

js/technical/systemComponents.js

@@ -12,29 +12,24 @@ var systemComponents = {
 	},
 
 	'tree-node': {
-		props: ['layer', 'abb', 'size'],
+		props: ['layer', 'abb', 'size', 'hover'],
 		template: `
-		<button v-if="nodeShown(layer)"
+		<button v-if="nodeShown(layer)"       @mouseover="hover = true" @mouseleave="hover = false"
 			v-bind:id="layer"
 			v-on:click="function() {
-				if(tmp[layer].isLayer) {showTab(layer)}
+				if (shiftDown) player[layer].forceTooltip = !player[layer].forceTooltip
+				else if(tmp[layer].isLayer) {showTab(layer)}
 				else {run(layers[layer].onClick, layers[layer])}
 			}"
 
-			v-bind:tooltip="(tmp[layer].tooltip == '') ? false : (tmp[layer].isLayer) ? (
-				player[layer].unlocked ? (tmp[layer].tooltip ? tmp[layer].tooltip : formatWhole(player[layer].points) + ' ' + tmp[layer].resource)
-				: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'Reach ' + formatWhole(tmp[layer].requires) + ' ' + tmp[layer].baseResource + ' to unlock (You have ' + formatWhole(tmp[layer].baseAmount) + ' ' + tmp[layer].baseResource + ')')
-			)
-			: (
-				tmp[layer].canClick ? (tmp[layer].tooltip ? tmp[layer].tooltip : 'I am a button!')
-				: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'I am a button!')
-			)
-			"
+
 			v-bind:class="{
 				treeNode: tmp[layer].isLayer,
 				treeButton: !tmp[layer].isLayer,
 				smallNode: size == 'small',
 				[layer]: true,
+				tooltipBox: true,
+				forceTooltip: player[layer].forceTooltip,
 				ghost: tmp[layer].layerShown == 'ghost',
 				hidden: !tmp[layer].layerShown,
 				locked: tmp[layer].isLayer ? !(player[layer].unlocked || tmp[layer].canReset) : !(tmp[layer].canClick),
@@ -44,6 +39,15 @@ var systemComponents = {
 			}"
 			v-bind:style="tmp[layer].computedNodeStyle">
 			{{(abb !== '' && tmp[layer].image === undefined) ? abb : '&nbsp;'}}
+			<tooltip
+			v-bind:text="(tmp[layer].tooltip == '') ? false : (tmp[layer].isLayer) ? (
+				player[layer].unlocked ? (tmp[layer].tooltip ? tmp[layer].tooltip : formatWhole(player[layer].points) + ' ' + tmp[layer].resource)
+				: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'Reach ' + formatWhole(tmp[layer].requires) + ' ' + tmp[layer].baseResource + ' to unlock (You have ' + formatWhole(tmp[layer].baseAmount) + ' ' + tmp[layer].baseResource + ')')
+			)
+			: (
+				tmp[layer].canClick ? (tmp[layer].tooltip ? tmp[layer].tooltip : 'I am a button!')
+				: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'I am a button!')
+			)"></tooltip>
 		</button>
 		`
 	},
@@ -164,5 +168,11 @@ var systemComponents = {
         template: `
         <button v-bind:class="back" onclick="goBack()">←</button>
         `
+    },
+
+	'tooltip' : {
+		props: ['text'],
+		template: `<div class="tooltip" v-html="text"></div>
+		`
 	}
 }

js/utils.js

@@ -316,11 +316,14 @@ function addTime(diff, layer) {
 	else data.timePlayed = time
 }
 
+shiftDown = false
+ctrlDown = false
+
 document.onkeydown = function (e) {
 	if (player === undefined) return;
 	if (gameEnded && !player.keepGoing) return;
-	let shiftDown = e.shiftKey
-	let ctrlDown = e.ctrlKey
+	shiftDown = e.shiftKey
+	ctrlDown = e.ctrlKey
 	let key = e.key
 	if (ctrlDown) key = "ctrl+" + key
 	if (onFocused) return

js/utils/save.js

@@ -70,6 +70,8 @@ function getStartLayerData(layer) {
 		layerdata.best = new Decimal(0);
 	if (layerdata.resetTime === undefined)
 		layerdata.resetTime = 0;
+	if (layerdata.forceTooltip === undefined)
+		layerdata.forceTooltip = false;
 
 	layerdata.buyables = getStartBuyables(layer);
 	if (layerdata.clickables == undefined)

style.css

@@ -544,68 +544,59 @@ ul {
 	transition-duration: 0s
 }
 
-[tooltip] {
+.tooltipBox { 
 	position: relative;
-	z-index: 99999999 !important
-}
+	display: inline-block;
+  }
   
-[tooltip]:before,
-[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;
-	-webkit-transform:translate3d(0,0,0);
-}
+  .tooltipBox:hover .tooltip{
+	opacity: 1;
+  }
 
-[tooltip]:before {
-	position: absolute;
+  .forceTooltip .tooltip{
+	opacity: 1;
+  }
+  
+  .tooltip { 
+	text-align: center;
+	width: 150px;
+	font-size: 16px;
+	line-height: 1.2;
 	bottom: 100%;
 	left: 50%;
 	margin-bottom: 5px;
 	margin-left: -80px;
 	padding: 7px;
-	width: 160px;
+	font-family: "Lucida Console", "Courier New", monospace;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
+	opacity: 0;
+	transition: opacity 0.5s;
+  
+	position: absolute;
+	z-index: 99999999 !important;
+  
 	background-color: var(--background_tooltip);
 	color: var(--points);
 	content: attr(tooltip);
-	text-align: center;
-	font-size: 14px;
-	line-height: 1.2;
-	transition-duration: 0.5s;
-	white-space: pre-wrap;
-}
+	font-size:14px;
 
-[tooltip]:after {
+  }
+
+  .tooltip::after {
+	content: " ";
 	position: absolute;
 	bottom: 100%;
 	left: 50%;
+
+	top: 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;
-	line-height: 0;
-	transition-duration: 0.5s;
-	white-space: pre-wrap;
-}
-
-[tooltip]:hover:before,
-[tooltip]:hover:after {
-	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
-	visibility: visible;
-	opacity: 1;
-	white-space: pre-wrap;
-	-webkit-transform:translate3d(0,0,0);
-
-}
+	border-width: 5px;
+	border-style: solid;
+	border-color: var(--background_tooltip) transparent transparent transparent;
+  }
   
 #loadingSection {
 	display: flex;