Tooltip文字提示组件的开发代码示例

以下是一个简单的Tooltip文字提示组件的开发代码示例，使用了Vue.js框架：

<template>  
  <div class="tooltip" v-show="isVisible" v-bind:style="{ top: `${offsetY}px`, left: `${offsetX}px` }">  
    <div class="tooltip-content">  
      {{ tooltipText }}  
    </div>  
  </div>  
</template>  

<script>  
export default {  
  props: {  
    tooltipText: {  
      type: String,  
      default: ''  
    },  
    offsetX: {  
      type: Number,  
      default: 0  
    },  
    offsetY: {  
      type: Number,  
      default: 0  
    }  
  },  
  data() {  
    return {  
      isVisible: false  
    };  
  },  
  mounted() {  
    this.showTooltip();  
  },  
  methods: {  
    showTooltip() {  
      this.isVisible = true;  
      // 延迟显示tooltip，防止鼠标移出元素时tooltip立即消失  
      setTimeout(() => {  
        this.isVisible = false;  
      }, 2000);  
    }  
  }  
};  
</script>  

<style scoped>  
.tooltip {  
  position: absolute;  
  background-color: #333;  
  color: #fff;  
  padding: 5px 10px;  
  border-radius: 3px;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);  
}  
</style>

这个Tooltip组件接收三个props：tooltipText表示提示文字，offsetX和offsetY表示提示框相对于触发元素的偏移量。在mounted钩子函数中，我们调用showTooltip方法来显示提示框，并设置一个2秒的延迟来隐藏提示框。在样式中，我们定义了提示框的样式，包括背景色、文字颜色、内边距、边框半径和阴影效果。