在文本角度文本上添加工具提示

Question

我正在使用text-angular指令来显示内容。现在，当用户将鼠标悬停在某些文本上时，我想在那里显示一个工具提示。

       <div text-angular id="htmlEditorId" ng-class="totalOrphans == 0 ? 'add-heightTo-textEditor' : 'html-editor-container'" class="textcontent-modal"
                            spellcheck="false" ng-model="data.htmlDocument" ta-disabled="isEditingDisabled" ng-mouseup="doSomethingWithSelectedText($event)"
                            ng-onkeyup="doSomethingWithSelectedText($event)" name="editor1">
                        </div>
 <span class="tooltiptext">Tooltip text</span>

我尝试使用 ng-mouseover 方法并尝试添加工具提示

$scope.show_Tool_Tip_OnHover = function(event) {
          if(event.target.nodeName === "SPAN"){
            $scope.show_tool_tip = true;
          } else {
            $scope.show_tool_tip = false;
          }
        }

现在，但是将鼠标悬停在文本上时看不到任何工具提示。指令是 ->

textangular

任何人都可以帮我吗？

Answer 1

我没有看到在div 元素上启动 ng-mouseover 函数来触发使用范围定义的show_Tool_Tip_OnHover函数。

最好向div 声明一个 title 属性并为其分配所需的内容。因此，它自然会向您显示浏览器默认工具提示，而无需编写任何额外的代码，而且也很安全。

https://www.w3.org/TR/html4/struct/global.html#h-7.4.3

<div text-angular 
    id="htmlEditorId" 
    ng-class="totalOrphans == 0 ? 'add-heightTo-textEditor' : 'html-editor-container'" 
    class="textcontent-modal"
    spellcheck="false" ng-model="data.htmlDocument" 
    ta-disabled="isEditingDisabled" 
    name="editor1" 
    title="Tooltip text">
</div>