Question

我需要有条件地将tooltip属性添加到元素。我正在尝试向其添加ID，并在控制器内调用angular.element，因此可以在其上使用element.attr（'uib-tooltip'，'test'）。这样做会将tooltip属性添加到元素，但是，当我将鼠标悬停在元素上时，tooltip将不会显示。

HTML

<td id="cellTest" ng-click="ctrl.test()">
  {{ parameter.current }}
</td>

JavaScript

vm.test = () => {
    const cellTest = angular.element(document.querySelector('#cellTest'));
    cellTest.attr("uib-tooltip", "test");
  }

当我单击该元素时，在控制器中调用了函数test（），并且工作正常。 uib-tooltip =“ test”属性被添加到<td>中。但是，工具提示不会显示。

我想补充一点，如果我在test（）函数中添加cellTest.css('color', 'red');，它就可以正常工作。样式被添加。为什么我的工具提示不起作用？：'（

Answer 1

作为变体

HTML

<td id="cellTest" uib-tooltip="test" tooltip-is-open="tooltipIsOpen" ng-click="tooltipIsOpen = !tooltipIsOpen">
  {{ parameter.current }}
</td>

Answer 2

您可以使用“标题”而不是“ uib-tooltip”吗？这是一个片段：

angular.module('app', [])
  .controller('Controller', function() {
    var vm = this;
    vm.parameter = {current: 'Parameter with title'};
    vm.parameter.notCurrent = 'Parameter without title';
    vm.test = () => {
      const cellTest = angular.element(document.querySelector('#cellTest2'));
      cellTest.attr("title", "Cell 2 Test");
      vm.parameter.notCurrent = 'Parameter, now with title'
    }
  });

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

<!doctype html>
<html ng-app="app">
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    
  </head>
  <body>  
    <h2>Using "title"</h2>
    <div ng-controller="Controller as ctrl">
    
      <table>
        <tr>
          <th>Foo</th>
          <th>Bar</th>
          <th>Click below</th>
        </tr>
        <tr>
          <td>Just another cell</td>
          <td id="cellTest1" uib-tooltip="test" title="Cell 1 Test">
            {{ ctrl.parameter.current }}
          </td>
          <td id="cellTest2" ng-click="ctrl.test()">
            {{ ctrl.parameter.notCurrent }}
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

AngularJS的动态条件工具提示

2 个答案: