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

【问题标题】：Add a tool-tip on the text angular text在文本角度文本上添加工具提示
【发布时间】：2018-04-06 09:34:37
【问题描述】：

我正在使用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

谁能帮我解决这个问题？

【问题讨论】：

标签： javascript jquery css angularjs html

【解决方案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>

【讨论】：