diff --git a/src/components/features/Achievement.vue b/src/components/features/Achievement.vue
index 9fad1be..9fc1ab9 100644
--- a/src/components/features/Achievement.vue
+++ b/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 }">
diff --git a/src/components/features/RespecButton.vue b/src/components/features/RespecButton.vue
index e8a628b..cba4570 100644
--- a/src/components/features/RespecButton.vue
+++ b/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 }"
diff --git a/src/components/fields/Slider.vue b/src/components/fields/Slider.vue
index 96f2d36..5df7287 100644
--- a/src/components/fields/Slider.vue
+++ b/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>
diff --git a/src/components/system/Nav.vue b/src/components/system/Nav.vue
index 983807b..dd84a2a 100644
--- a/src/components/system/Nav.vue
+++ b/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>
- <div class="info" @click="openDialog('Info')"><br/>i</div>
- <img class="options" src="images/options_wheel.png" @click="openDialog('Saves')" />
- <img class="options" src="images/options_wheel.png" @click="openDialog('Options')" />
+ <tooltip display="<span>Info</span>" bottom yoffset="4px">
+ <div class="info" @click="openDialog('Info')"><br/>i</div>
+ </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>
- <img class="options overlay" src="images/options_wheel.png" @click="openDialog('Saves')" />
- <img class="options overlay" src="images/options_wheel.png" @click="openDialog('Options')" />
- <div class="version overlay" @click="openDialog('Changelog')">v{{ version }}</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>
diff --git a/src/components/system/Tooltip.vue b/src/components/system/Tooltip.vue
index a668e9a..df9d93f 100644
--- a/src/components/system/Tooltip.vue
+++ b/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] {
- position: relative;
+.tooltip-container {
+ position: relative;
+ --xoffset: 0px;
+ --yoffset: 0px;
}
-[tooltip]:before,
-[tooltip]:after {
- visibility: hidden;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
+.tooltip, .tooltip::after {
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 {
- 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;
+.tooltip::after {
content: " ";
- font-size: 0;
- line-height: 0;
- white-space: pre-wrap;
+ position: absolute;
+ top: 100%;
+ 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].forceTooltip:before,
-[tooltip]:hover:after,
-[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;
+.tooltip.left,
+.side-nodes .tooltip:not(.right):not(.bottom):not(.top) {
+ bottom: calc(50% + var(--yoffset));
left: unset;
- right: 100%;
- top: 50%;
- margin-left: unset;
+ right: calc(100% + var(--xoffset));
margin-bottom: unset;
margin-right: 5px;
- transform: translateY(-50%);
+ transform: translateY(50%);
}
-.tooltip-left[tooltip]:after,
-.side-nodes [tooltip]:after {
+.tooltip.left::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%;
- transform: translateY(-50%);
- border-left: 5px solid var(--background-tooltip);
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-right: unset;
+ margin-left: unset;
+ margin-top: -5px;
+ border-color: transparent transparent transparent var(--background-tooltip);
+}
+
+.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>
diff --git a/src/components/tree/Branches.vue b/src/components/tree/Branches.vue
index bac73d3..f62699f 100644
--- a/src/components/tree/Branches.vue
+++ b/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>
diff --git a/src/components/tree/TreeNode.vue b/src/components/tree/TreeNode.vue
index 0ced67f..2a2de9e 100644
--- a/src/components/tree/TreeNode.vue
+++ b/src/components/tree/TreeNode.vue
@@ -1,6 +1,5 @@
<template>
- <tooltip :text="tooltip" :class="{
- forceTooltip,
+ <tooltip :display="tooltip" :force="forceTooltip" :class="{
ghost: layer.layerShown === 'ghost',
treeNode: true,
[id]: true,