Improved tooltip performance
This commit is contained in:
parent
380da5069e
commit
beb9e38b92
2 changed files with 27 additions and 15 deletions
|
@ -1,10 +1,13 @@
|
||||||
<template>
|
<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 />
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -13,6 +16,11 @@ import { coerceComponent } from '../../util/vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'tooltip',
|
name: 'tooltip',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
hover: false
|
||||||
|
};
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
force: Boolean,
|
force: Boolean,
|
||||||
display: String,
|
display: String,
|
||||||
|
@ -26,12 +34,20 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
tooltipDisplay() {
|
tooltipDisplay() {
|
||||||
return coerceComponent(this.display);
|
return coerceComponent(this.display);
|
||||||
|
},
|
||||||
|
shown() {
|
||||||
|
return this.force || this.hover;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
provide: {
|
provide: {
|
||||||
tab() {
|
tab() {
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setHover(hover) {
|
||||||
|
this.hover = hover;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -59,20 +75,17 @@ export default {
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
opacity: 0;
|
|
||||||
background-color: var(--background-tooltip);
|
background-color: var(--background-tooltip);
|
||||||
color: var(--points);
|
color: var(--points);
|
||||||
|
z-index: 100 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-container:hover,
|
.shown {
|
||||||
.force {
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-container:hover > .tooltip,
|
.fade-enter, .fade-leave-to {
|
||||||
.force > .tooltip {
|
opacity: 0;
|
||||||
opacity: 1;
|
|
||||||
z-index: 100 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip::after {
|
.tooltip::after {
|
||||||
|
|
|
@ -24,7 +24,6 @@
|
||||||
import { layers } from '../../store/layers';
|
import { layers } from '../../store/layers';
|
||||||
import { player } from '../../store/proxies';
|
import { player } from '../../store/proxies';
|
||||||
import { coerceComponent } from '../../util/vue';
|
import { coerceComponent } from '../../util/vue';
|
||||||
import { formatWhole } from '../../util/bignum';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'tree-node',
|
name: 'tree-node',
|
||||||
|
@ -73,10 +72,10 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (player[this.id].unlocked) {
|
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 {
|
} else {
|
||||||
return this.layer.tooltipLocked ||
|
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() {
|
components() {
|
||||||
|
|
Loading…
Reference in a new issue