Question

我试图在第一个TD上的每个元素的顶部显示一个tootltip。但是由于它在ng-repeat中，很多工具提示（设计糟糕）都出现了。我怎么能在我徘徊的td顶部显示它？我不能在此使用角度UI。请帮帮我。谢谢！

http://plnkr.co/edit/UJ8UDaTHaACZwX7uw5B8?p=info

    <tr ng-repeat="friend in friends">
        <td ng-mouseover="positive()" ng-mouseleave="negative()">{{friend.name}}
      <hover ng-show="showHover"></hover>
        </td>
        <td>{{friend.age}}</td>
        <td>{{friend.gender}}</td>
    </tr>

Answer 1

我建议您使用可用于所有html元素的title属性。从可访问性的角度来看，这很好。

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body ng-controller="mainCtrl">

    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
        <tr ng-repeat="friend in friends">
            <td ng-mouseover="positive()" ng-mouseleave="negative()" title="{{tooltipText}} - {{friend.name}}">
                {{friend.name}}
            </td>
            <td>{{friend.age}}</td>
            <td>{{friend.gender}}</td>
        </tr>
    </table>
</body>

</html>

如果您需要设置工具提示的样式，请检查此链接是否有帮助。

http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

Answer 2

每个工具提示只需要一个唯一的名称，在这种情况下，您可以使用名称或$ index：

HTML：

<tr ng-repeat="friend in friends">
    <td ng-mouseover="positive(friend.name)" ng-mouseleave="negative(friend.name)">
        {{friend.name}}
        <hover ng-show="showHover[friend.name]"></hover>
    </td>
    <td>{{friend.age}}</td>
    <td>{{friend.gender}}</td>
</tr>

JS：

$scope.showHover = {};

$scope.positive = function(name) {

    $scope.showHover[name] = true;

    if (name.indexOf('*') > -1) {
        $scope.tooltipText = "Changed value";
    }
    if (name.indexOf('-') > -1) {
        $scope.tooltipText = "No Data"          
    } else {
        $scope.tooltipText = "Original value";
    }
}

$scope.negative = function(name) {
    $scope.showHover[name] = false;
}

angularjs ng-repeat中的工具提示？

2 个答案: