启用复选框时如何隐藏工具提示

Posted 2023-05-09

【中文标题】启用复选框时如何隐藏工具提示

【英文标题】：How to hide a tooltip when a checkbox becomes enabled

【发布时间】：2019-07-26 06:54:01

【问题描述】：

我只想在复选框被禁用时显示工具提示。当在输入文本字段中输入正确的格式时，该复选框将启用。我可以在复选框被禁用时显示工具提示，但在复选框启用时它不会隐藏。

<div class="form-group">
    <div class="col-xs-12 col-sm-9">
        <div tooltip="Tooltip message">
            <input type="checkbox" ng-model="view.checkBox"
                   class="nsg-form--checkbox" 
                   ng-disabled="someInput.$invalid"/>
        </div>
    </div>
</div>

【参考方案1】：

我建议使用 ng-change 来捕获复选框状态的变化，并使用 ng-if 来在复选框返回 true 时显示弹出窗口。我整理了一个应该有帮助的简单示例：https://codepen.io/anon/pen/xBEvOq

html：

<div ng-app="myApp">
  <div ng-controller="exampleCtrl">
      <input title="(disabledStatus?'disabledReason' : '')" 
             ng-disabled="displayPopup" type="checkbox" ng-model="checkBox" 
             ng-change="evaluate(checkBox)"/>
      <div ng-if="displayPopup">Insert Popup Code Here!</div>
  </div>
</div>

JS：

var app = angular.module('myApp', []);
app.controller('exampleCtrl', function($scope) 
  $scope.evaluate = function(displayPopup) 
    $scope.displayPopup = displayPopup;
    $scope.disabledStatus = false;
    if($scope.displayPopup === true)
      $scope.disabledStatus = true;
      $scope.disabledReason = "You can make up reason here";
    
  ;
);

【讨论】：

有没有办法在 html 中捕捉从禁用复选框到启用的变化？无需勾选框？这样当用户尝试单击禁用的复选框但发现一个工具提示通知他们为什么它被禁用时

您要问的是，当用户尝试单击设置为禁用的复选框时，不允许单击而是显示工具提示？

是的。就是这样

当复选框启用时，我希望工具提示不再出现。我在复选框被禁用时出现了工具提示，但是当由于用户在文本框中输入正确的输入而启用它时，工具提示仍然存在

好的，我做了一些更改，现在当您禁用该复选框时，它会在鼠标悬停时显示一条悬停消息，这是您想要的吗？