ui bootstrap 禁用输入时启用工具提示

Question

您好，我希望在禁用 input[submit] 时显示工具提示。禁用输入效果很好，当输入[文本]无效但工具提示不显示时，它会被禁用。

这是我的代码：

<input type="submit"
       form="loginData"
       ng-disabled="loginData.login.$invalid || loginData.password.$invalid"
       class="btn btn-primary btn-md"
       ng-click="$ctrl.login()"
       value="Zaloguj"
       uib-tooltip="Wypełnij formularz!"
       tooltip-placement="top"
       tooltip-trigger="'mouseenter'"
       tooltip-append-to-body="true"
       tooltip-enable="loginData.login.$invalid || loginData.password.$invalid" />

tooltip-enable 指令应该在输入登录名或密码无效时启用工具提示，但它不起作用，请快速帮助！

编辑：我正在使用 google chrome，所以我没有意识到这个解决方案实际上适用于其他浏览器（肯定是 mozilla）。但它仍然不适用于最新的 google chrome 所以它还不够令人满意。

总结新问题是如何在 google chrome?

中解决该问题

Answer 1

HTML 禁用属性的元素不会触发事件。

但别担心，您可以使用一个简单的 div/span 和 uib-tooltip 指令作为禁用 wrapper 37=]。

在您的情况下，您只想在禁用时显示工具提示，因此请尝试以下操作...(PLUNKER)

HTML

<span uib-tooltip="Demo tooltip" 
      tooltip-enable="isBtnDisabled" 
      ng-class="{'my-tooltip': isDisabled}">
    <input type="submit" ng-disabled="isDisabled" class="btn btn-info" value="My btn">
</span>

CSS

.my-tooltip {
  display: inline-block;
}

.my-tooltip input {
  position: relative;
  z-index: -1;
}

ui bootstrap 禁用输入时启用工具提示

ui bootstrap tooltip enable when input is disabled

angularjs

angular-ui-bootstrap

angular-directive

twitter-bootstrap-tooltip