angularjs ng-repeat中的工具提示？

我想在第一個TD上的每個元素的頂部顯示一個tootltip。但是，自從它在ng-repeat中，許多工具提示（設計得非常糟糕）都出現了。我如何才能在我懸停的td頂部顯示它？我無法在此上使用有角度的用戶界面。請幫助我。謝謝！angularjs ng-repeat中的工具提示？

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>

來源

2016-09-02 Aijaz

我會建議你使用，可用於所有的HTML元素的title屬性。從可訪問性角度來看這是很好

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

<head> 
    <script data-require="[email protected]" 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/

來源

2016-09-02 23:57:40 Kalpana

你只需要擁有一個唯一的名稱爲每個工具提示，在這種情況下，你可以使用名稱或$指數：

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; 
}

來源

2016-09-03 00:05:34 cnorthfield

angularjs ng-repeat中的工具提示？

回答

相關問題