AngularJS 1.5.8：输入框聚焦5秒未输入触发Tooltip方案咨询

我来给你梳理几个实用的方案，完美适配你这个“焦点停留5秒未输入才显示统一Tooltip”的需求，同时避开之前click触发器的异常问题：

方案一：扩展现有Tooltip指令，集成延迟逻辑 #

既然你已经有支持focus触发的Tooltip指令，直接在它的focus事件处理里加入定时器和输入监听是最省事的。核心思路是：

• 输入框获焦时启动5秒定时器
• 一旦用户开始输入，立即取消定时器并隐藏Tooltip
• 输入框失焦时也清理定时器，避免内存泄漏

修改后的指令核心代码示例：

angular.module('yourApp').directive('yourTooltip', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      var timeoutId;
      var tooltipElement; // 假设你已有创建Tooltip元素的逻辑

      // 显示Tooltip的方法
      function showTooltip() {
        // 这里放你原有的Tooltip显示逻辑
        tooltipElement.show();
      }

      // 隐藏Tooltip的方法
      function hideTooltip() {
        // 这里放你原有的Tooltip隐藏逻辑
        tooltipElement.hide();
      }

      element.on('focus', function() {
        // 启动5秒延迟定时器
        timeoutId = $timeout(showTooltip, 5000);

        // 监听输入事件，一旦输入就取消定时器
        element.on('input', inputHandler);
        // 监听失焦事件，清理定时器和监听
        element.on('blur', blurHandler);
      });

      function inputHandler() {
        if (timeoutId) {
          $timeout.cancel(timeoutId);
          timeoutId = null;
        }
        hideTooltip();
        // 输入后移除监听，避免重复触发
        element.off('input', inputHandler);
      }

      function blurHandler() {
        if (timeoutId) {
          $timeout.cancel(timeoutId);
          timeoutId = null;
        }
        hideTooltip();
        element.off('input', inputHandler);
        element.off('blur', blurHandler);
      }

      // 页面销毁时清理资源
      scope.$on('$destroy', function() {
        if (timeoutId) $timeout.cancel(timeoutId);
        element.off('focus input blur');
      });
    }
  };
});

使用时直接在动态输入框上绑定指令即可（比如ng-repeat生成的元素）：

<input type="text" ng-repeat="item in dynamicItems" your-tooltip="统一提示内容">

方案二：新增辅助指令，与原有Tooltip指令配合 #

如果不想修改原有Tooltip指令，你可以写一个轻量的辅助指令，专门控制Tooltip的显示时机，通过依赖注入调用原有Tooltip的控制方法：

angular.module('yourApp').directive('delayTooltipTrigger', function($timeout) {
  return {
    require: 'yourTooltip', // 依赖你的原有Tooltip指令
    link: function(scope, element, attrs, tooltipCtrl) {
      var timeoutId;

      element.on('focus', function() {
        timeoutId = $timeout(function() {
          tooltipCtrl.show(); // 调用原有Tooltip的显示方法
        }, 5000);
      });

      // 输入时取消定时器并隐藏Tooltip
      element.on('input', function() {
        if (timeoutId) {
          $timeout.cancel(timeoutId);
          timeoutId = null;
        }
        tooltipCtrl.hide(); // 调用原有Tooltip的隐藏方法
      });

      // 失焦时清理
      element.on('blur', function() {
        if (timeoutId) {
          $timeout.cancel(timeoutId);
          timeoutId = null;
        }
        tooltipCtrl.hide();
      });

      scope.$on('$destroy', function() {
        if (timeoutId) $timeout.cancel(timeoutId);
        element.off('focus input blur');
      });
    }
  };
});

HTML使用方式：

<input type="text" ng-repeat="item in dynamicItems" your-tooltip="统一提示内容" delay-tooltip-trigger>

关键注意点 #

1. 原有Tooltip指令需支持手动触发模式：把原指令的trigger设置为manual，避免默认的focus触发逻辑和我们的延迟逻辑冲突
2. 动态元素适配：如果是用ng-repeat生成的输入框，指令会自动绑定到每个元素上；如果是手动通过JS添加的元素，记得用$compile编译后再插入DOM，确保指令生效
3. 内存泄漏防范：一定要在$destroy事件里清理定时器和事件监听，避免页面销毁后残留资源

之前用click触发器出现异常，大概率是因为click事件只触发一次，无法监听用户后续的输入状态，导致Tooltip要么一直显示，要么无法根据输入状态及时隐藏，换成focus+input+blur的组合逻辑就能完美解决这个问题。

内容的提问来源于stack exchange，提问作者Flamos