<template>
	<div ref="dotTip" class="dotTip" :style="style" v-show="visible">
		<span>{{content}}</span>
	</div>
</template>

<script>
	export default {
		name: "ToolTip",
		data() {
			return {
				visible: false,
				content: '',
				style: {
					left: '0px',
					top: '0px',
				},
			}
		},
		methods: {
			show(x, y, text, delay = 0) {
				if (delay > 0) {
					setTimeout(() => {
						this._show(x, y, text);
					}, delay)
				} else {
					this._show(x, y, text);
				}
			},
			_show(x, y, text) {
				this.style.left = x + 'px';
				this.style.top = y + 'px';
				this.content = text;

				this.visible = true;
			},
			hide() {
				this.visible = false;
			}
		}
	}
</script>

<style scoped>
	.dotTip {
		position: absolute;
		top: 200px;
		left: 200px;
		color: white;
		font-size: 12px;
		background-color: #303133;
		padding: 5px;
		border-radius: 5px;
		pointer-events: none;
		z-index: 2;
	}
</style>