gpt4 book ai didi

javascript - angularjs ng-repeat中的工具提示?

转载 作者:行者123 更新时间:2023-11-28 05:16:13 25 4
gpt4 key购买 nike

我试图在第一个 TD 上的每个元素的顶部显示一个提示。但由于它在 ng-repeat 中,出现了许多工具提示(设计糟糕)。我怎样才能在我悬停的 td 顶部显示它?我不能在这上面使用 Angular 用户界面。请帮帮我。谢谢!

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>

最佳答案

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

<!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/

关于javascript - angularjs ng-repeat中的工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39301745/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com