移动端(H5) 用vue实现tooltip功能

前提:
由于vant组件库没有tooltip的功能只能手写了.
先上图


当点击最右边的小宫格时,tooltip提示框不会超出去,会一直保持在可视区域里.

html:

<template>
  <div class="wrap" @click="showTips = false">
    <div class="subject">
      學習情況
    </div>
    <hr />
    <div class="content">
      <van-row gutter="15">
        <!-- 科目 -->
        <van-col span="4" class="result-name-wrap">
          <van-row
            class="result-name"
            v-for="(item, index) in demoData.result"
            :key="index"
          >
            {
  { item.name }}
          </van-row>
        </van-col>
        <van-col span="20">
          <div class="result">
            <!-- 科目 -->
            <van-row class="top-subject">
              <span
                class="top-subject-name"
                v-for="(item, index) in demoData.subject"
                :key="index"
              >
                {
  { item }}
              </span>