描述

鼠标移入元素，显示提示内容，如使用中所描述，会提示字符串clickOutside

使用

<div v-tooltip="clickOutside">
  <input />
</div>

代码

/* 鼠标提示信息 */
  app.directive('tooltip', {
    mounted(el, binding) {
      let tooltip;

      // 检查内容是否超出标签宽度
      const isOverflowing = () => {
        console.log(el, el.scrollWidth, el.clientWidth, el.scrollWidth > el.clientWidth)
        return el.scrollWidth > el.clientWidth;
      };

      // 创建工具提示
      const createTooltip = () => {
        tooltip = document.createElement('div');
        tooltip.textContent = binding.value || el.textContent;
        tooltip.style.position = 'absolute';
        tooltip.style.backgroundColor = '#333';
        tooltip.style.color = '#fff';
        tooltip.style.padding = '5px 10px';
        tooltip.style.borderRadius = '4px';
        tooltip.style.zIndex = '1000';
        tooltip.style.maxWidth = `${el.clientWidth * 2}px`; // 限制为元素宽度

        document.body.appendChild(tooltip);

        const rect = el.getBoundingClientRect();
        tooltip.style.top = `${rect.bottom + 5}px`; // 调整到元素下方5px处
        tooltip.style.left = `${rect.left + 10}px`;
      };

      // 鼠标移入事件
      el.addEventListener('mouseenter', () => {
        if (isOverflowing()) {
          createTooltip();
        }
      });

      // 鼠标移出事件
      el.addEventListener('mouseleave', () => {
        if (tooltip) {
          document.body.removeChild(tooltip);
          tooltip = null;
        }
      });
    }
  });