angular js中禁用div的工具提示

Question

I am new to angularjs . Actually before posting this question I have searched a lot I found different answers for the question, but none of that were working for me . So, I tried with the css as well. Here I am using a input type="file" and for that My code is like -

<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isSingleFileSelected">
                                <span class="glyphicon glyphicon-folder-open"></span>
                        <span class="file-preview-input-title">BrowseFolder</span>
                         <input type="file" ng-click="clearFileName()" id="uploadId" webkitdirectory directory multiple file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf"
                                name="input-file-preview" />
                    </div>
                    <div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isFolderSelected">
                        <span class="glyphicon glyphicon-file"></span>
                        <span class="file-preview-input-title">BrowseFile</span>
                        <input type="file" ng-click="clearFileName()" file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" name="input-file-preview"
                        />
                    </div>

Now in this code I have some variables like - isSingleFileSelected on that basis I am enabling and disabling . Now I want to have a tooltip even if it is disabled . So, Here I tried by adding the ng-disabled on the input type but there user is able to click on that field,it is disabled but still.So, I added ng-disabled on the div itself so now user is not able to click input type but not able to show the tooltip that to enable this do this . Can any one please help me here. Thanks in advance.

Answer 1

Ok so here is a very clear explanation:

Events are not fired on disabled form elements in javascript.

The easiest solution here is to wrap your input tag in an element, and show your tooltip in the wrapping element instead of the div. Something like this:

<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isSingleFileSelected">
       <span class="glyphicon glyphicon-folder-open"></span>
       <span class="file-preview-input-title">BrowseFolder</span>
       <div ng-mouseover="showTooltip()">
           <input type="file" ng-click="clearFileName()" id="uploadId" webkitdirectory directory multiple file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" name="input-file-preview" />
       </div>
</div>