Bootstrap

a-tooltip动态显示隐藏tip效果;el-input输入框内容动态展示el-tooltip

1.文本

a-tooltip自动根据内容长度,超出隐藏时候才有tip效果。
在这里插入图片描述

            <a-tooltip placement="topRight" @mouseenter="showToolTip">
              <template slot="title">
                {{ customItem.title }}
              </template>
              <div class="search-item-title width200 ellipsis">{{ customItem.title }}</div>
            </a-tooltip>
    // 判断是否展示tip
    showToolTip(e) {
      console.log(e, e.target, e.target.clientWidth, e.target.scrollWidth)
      if (e.target.clientWidth >= e.target.scrollWidth) {
        e.target.style.pointerEvents = 'none' // 阻止鼠标事件    pointer-events 属性用于设置元素是否对鼠标事件做出反应。
      }
    },

2.输入框

在这里插入图片描述

          <el-form-item label="报价说明" prop="remark02">
            <el-tooltip
              effect="light"
              :content="ruleForm.remark02"
              :disabled="isShowTooltip "
              placement="top"
            >
              <el-input
                @mouseover.native="inputOnMouseOver($event)"
                v-model="ruleForm.remark02"
                placeholder="请输入报价说明"
                :disabled="isEdit == 'none'"
              ></el-input> 
            </el-tooltip>
          </el-form-item>

     // 以下变量定义在data里
      isShowTooltip:false,
       // 鼠标移入输入框
         inputOnMouseOver(e){
          const target = e.target;
          console.log(target.offsetWidth,target.scrollWidth);
            // 判断是否开启tooltip功能
            if (target.offsetWidth < target.scrollWidth) {
              this.isShowTooltip = false;
            } else {
              this.isShowTooltip = true;
            }
        },

;