vue-idle-game/src/components/tooltip.vue

<template>
    <div class="c-tooltip">
        <div class="c-tooltip-content" @mouseover="mouseover" @mouseleave="mouseleave" @touchstart="touchstart"
            @touchend="touchend">
            <slot></slot>
        </div>
        <div class="c-tooltip-tip" :class="placement" v-if="tipsShow" :style='tipsStyle'>
            <img v-if="showIcon" :src="tips_icon" class="tip-icons"></img>
            <p v-for="info in infos" class="info">* {{ info }}</p>
            <slot name="tip"></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { tips_icon } from "@/config";


const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const tipsShow = ref(false);
const tipsStyle = ref({
    transform: ''
});

const prop = defineProps({
    placement: {
        type: String,
        default: ''
    },
    infos: {
        type: Array,
    },
    width: {
        type: String,
        default: '16rem'
    },
    showIcon: {
        type: Boolean,
        default: true
    },
    x: {
        type: String,
        default: null
    }
})
const touchstart = (e) => {
    if (!state.mobile) return;
    showTips(e.touches[0]);

}
const touchend = () => {
    if (!state.mobile) return;
    closeTips();
}
const mouseover = (e) => {
    if (state.mobile) return;
    showTips(e);
}
const mouseleave = () => {
    if (state.mobile) return;
    closeTips();
}

const showTips = (e) => {
    const x = e.pageX, y = e.pageY, maxH = window.innerHeight, maxW = window.innerWidth;
    let xt = x < 100 ? '15%' : y < maxH - 100 ? '0%' : '-40%';
    if (prop.x) {
        xt = prop.x;
    }
    const yt = y < maxH / 2 ? '100%' : '-50%';
    tipsStyle.value.transform = 'translate(' + xt + ', ' + yt + ')';
    tipsShow.value = true
}
const closeTips = () => {
    tipsShow.value = false
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
.c-tooltip,
.c-tooltip-content {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.c-tooltip-tip {
    bottom: -.4rem;
    position: absolute;
    transform: translate(0%, 100%);
    min-width: v-bind('width');
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 1.2rem;
    background: #111111;
    // padding-top: 3.6rem;
    font-size: 0.86rem;
    font-weight: normal;
    z-index: 9999;
    box-shadow: 0 0 3px 3px rgba($color: #000000, $alpha: 1.0);

    .tip-icons {
        // position: absolute;
        margin-left: 50%;
        transform: translateX(-50%);
        display: flex;
        width: 3.2rem;
        height: 3.2rem;
        background-size: cover;
    }

    .info {
        font-weight: normal;
        margin-top: 0.4rem;
    }

}

.top {
    top: -2rem;
    transform: translate(-50%, -100%);
    bottom: initial;
}
</style>