a-tooltip动态显示隐藏tip效果

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 属性用于设置元素是否对鼠标事件做出反应。
      }
    },

猜你喜欢

转载自blog.csdn.net/i_am_a_div/article/details/130343412