AngularJS中禁用div的Tooltip显示问题求助

Hey there! As someone new to AngularJS, I totally get how frustrating it can be when small UI quirks throw off your workflow. Let's fix this issue where your disabled div hides the tooltip, while also making sure the file input doesn't respond to clicks when it's supposed to be disabled.

The Core Problem #

• Adding ng-disabled directly to the <div> disables all mouse events on the container, including tooltip triggers.
• Adding ng-disabled only to the <input type="file"> doesn't always work as expected—browsers often let you still click the file input even when it's marked disabled.

Fix 1: Separate Visual Disabling from Input Behavior #

We'll handle the visual disabled state on the div, keep the input properly disabled, and prevent clicks on the input while keeping the tooltip accessible.

Here's the modified code for your folder browse button:

<div class="btn btn-info btn-labeled file-preview-input" 
     tooltip="Cannot select a folder when a single file is already selected"
     ng-class="{'disabled': isSingleFileSelected}">
  <span class="glyphicon glyphicon-folder-open"></span>
  <span class="file-preview-input-title">BrowseFolder</span>
  <input type="file" 
         ng-click="isSingleFileSelected ? $event.preventDefault() : clearFileName()"
         ng-disabled="isSingleFileSelected"
         id="uploadId" 
         webkitdirectory directory multiple 
         file-upload="myFile" 
         accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" 
         name="input-file-preview" />
</div>

And for your file browse button:

<div class="btn btn-info btn-labeled file-preview-input" 
     tooltip="Cannot select individual files when a folder is already selected"
     ng-class="{'disabled': isFolderSelected}">
  <span class="glyphicon glyphicon-file"></span>
  <span class="file-preview-input-title">BrowseFile</span>
  <input type="file" 
         ng-click="isFolderSelected ? $event.preventDefault() : clearFileName()"
         ng-disabled="isFolderSelected"
         file-upload="myFile" 
         accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" 
         name="input-file-preview" />
</div>

How This Works:

1. Visual Disabling: ng-class="{'disabled': isSingleFileSelected}" adds Bootstrap's disabled class to the div, giving it the grayed-out, unclickable look without actually disabling the div's mouse events.
2. Input Disable: ng-disabled on the input marks it as disabled for accessibility purposes.
3. Prevent Click: The ternary in ng-click checks if the button should be disabled—if yes, $event.preventDefault() stops the file selection dialog from opening. If not, it runs your clearFileName() function as normal.
4. Tooltip Accessibility: Since the div isn't actually disabled (just styled to look like it), the tooltip will still trigger on hover.

Fix 2: Using UI Bootstrap Tooltip (If You're Using It) #

If you're leveraging Angular UI Bootstrap's tooltip directive, you can force the tooltip to display even on visually disabled elements by explicitly setting the tooltip trigger and enabling it:

<div class="btn btn-info btn-labeled file-preview-input" 
     uib-tooltip="Your tooltip text here"
     tooltip-trigger="mouseenter"
     tooltip-enable="true"
     ng-class="{'disabled': isSingleFileSelected}">
  <!-- Your input and icons here -->
</div>

This ensures the tooltip ignores any visual disabled state and responds to mouse events.

Final Notes #

• Make sure your clearFileName() function handles the cases where the button is disabled (though the ternary in ng-click should prevent it from running when disabled).
• Test across browsers—some older browsers might handle file input disabled states differently, but the preventDefault() trick should cover most cases.

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