Vue 自定义文字提示框

前言

    今天开发遇上了一个新的问题，要求写一个带着滑动动画的文字提示框。但是我经常使用的Element-UI组件库只有淡入淡出效果，并且想要修改样式只能全局修改，非常不利于后期的开发。因此，我最终选择直接自定义一个符合设计的文字提示框，并期望能对你们有所帮助。文末附有演示视频。

代码演示

相关代码

文字提示框组件定义

<template>  
  <div class="custom-tooltip-wrapper"  @mouseover="visible = true" @mouseleave="visible = false">  
    <div class="trigger-box">
      <slot name="trigger"></slot> <!-- 插槽用于传入触发Tooltip的元素 -->  
    </div>
    <div class="custom-tooltip">  
      <slot name="content"></slot> <!-- 插槽用于传入Tooltip的内容 -->  
      <div class="tooltip-arrow"></div>  <!-- 箭头 -->