traxxx/assets/components/tooltip/tooltip.vue

175 lines
3.0 KiB
Vue
Raw Normal View History

<template>
<div class="tooltip-container">
2020-12-27 03:21:10 +00:00
<div
ref="trigger"
class="trigger noselect"
@click.stop="toggle"
>
<slot />
</div>
<teleport to="body">
2020-12-27 03:21:10 +00:00
<div
v-if="opened"
ref="tooltip"
class="tooltip-wrapper"
:style="{ transform: `translate3d(${tooltipX}px, ${tooltipY}px, 0)` }"
>
<div class="tooltip-inner">
<div class="tooltip">
<slot name="tooltip" />
</div>
<div
class="tooltip-arrow"
:style="{ transform: `translate3d(${arrowOffset}px, 0, 0)` }"
/>
</div>
</div>
</teleport>
</div>
</template>
<script>
2020-12-27 03:21:10 +00:00
import { nextTick } from 'vue';
2020-12-27 03:21:10 +00:00
function getX(triggerBoundary, tooltipBoundary) {
const idealPosition = triggerBoundary.left + (triggerBoundary.width / 2) - (tooltipBoundary.width / 2);
const rightEdgeOverflow = Math.max((idealPosition + tooltipBoundary.width) - window.innerWidth, 0);
2020-12-27 03:21:10 +00:00
// don't overflow left edge
if (idealPosition < 0) {
return {
tooltipX: 0,
arrowOffset: idealPosition,
};
2020-12-27 03:21:10 +00:00
}
// don't overflow right edge
if (rightEdgeOverflow > 0) {
return {
tooltipX: window.innerWidth - tooltipBoundary.width,
arrowOffset: rightEdgeOverflow,
};
2020-12-27 03:21:10 +00:00
}
// position at the center of trigger
return {
tooltipX: idealPosition,
arrowOffset: 0,
};
2020-12-27 03:21:10 +00:00
}
async function calculate() {
if (!this.opened) {
return;
}
const triggerBoundary = this.$refs.trigger.getBoundingClientRect();
const tooltipBoundary = this.$refs.tooltip.getBoundingClientRect();
const { tooltipX, arrowOffset } = this.getX(triggerBoundary, tooltipBoundary);
2020-12-27 03:21:10 +00:00
this.tooltipY = triggerBoundary.top + triggerBoundary.height;
this.tooltipX = tooltipX;
this.arrowOffset = arrowOffset;
2020-12-27 03:21:10 +00:00
}
async function open() {
this.events.emit('blur');
await nextTick();
this.opened = true;
await nextTick();
this.calculate();
this.$emit('open');
2020-12-27 03:21:10 +00:00
}
function close() {
this.opened = false;
this.tooltipY = 0;
this.tooltipX = 0;
this.arrowOffset = 0;
this.$emit('close');
2020-12-27 03:21:10 +00:00
}
function toggle() {
if (this.opened) {
this.close();
return;
}
this.open();
}
function mounted() {
this.events.on('blur', () => {
this.close();
});
this.events.on('resize', () => {
this.calculate();
});
}
export default {
data() {
return {
opened: false,
tooltipX: 0,
tooltipY: 0,
arrowOffset: 0,
2020-12-27 03:21:10 +00:00
};
},
emits: ['open', 'close'],
2020-12-27 03:21:10 +00:00
mounted,
methods: {
calculate,
getX,
open,
close,
toggle,
},
};
</script>
<style lang="scss" scoped>
2020-12-27 03:21:10 +00:00
.tooltip-wrapper {
display: flex;
top: 0;
left: 0;
flex-direction: column;
justify-content: center;
position: absolute;
z-index: 10;
}
2020-12-27 03:21:10 +00:00
.tooltip-inner {
position: relative;
box-shadow: 0 0 3px var(--darken-weak);
}
.tooltip {
2020-12-27 03:21:10 +00:00
position: relative;
background: var(--background-light);
}
.tooltip-arrow {
content: '';
width: 0;
height: 0;
position: absolute;
top: -.5rem;
left: calc(50% - .5rem);
border-left: .5rem solid transparent;
border-right: .5rem solid transparent;
border-bottom: .5rem solid var(--background-light);
margin: 0 auto;
filter: drop-shadow(0 0 3px var(--darken-weak));
}
</style>