如何在angualrjs中为动态创建的SVG元素添加工具提示？
如何在angualrjs中为动态创建的SVG元素添加工具提示？
提问于 2018-08-14 21:46:03
我们需要动态创建的圆上的工具提示。svg圆是在页面中自定义创建的，悬停在工具提示上应该可以工作。
下面是代码片段：
<td ng-if="fldc.selected && fldc.itemStatus != undefined">
<span ng-if="fldc.itemStatus">
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" style="margin: 1px;">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</span>
<span ng-if="!fldc.itemStatus">
<svg class="checkmark1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" style="margin: 1px;">
<circle class="checkmark__circle1" cx="26" cy="26" r="25" fill1="none" />
<path class="checkmark__check1" fill1="none" d="M16 16 36 36 M36 16 16 36" />
</svg>
</span>
</td>回答 3
Stack Overflow用户
发布于 2018-08-15 07:12:49
我会调查ngMouseover的。您可以将其应用于包含SVG的span。当您将鼠标悬停在上面时，您可以显示或隐藏悬停。如果你需要如何在CSS中做到这一点的例子，你可以看看这个CodePen。希望这能有所帮助！
Stack Overflow用户
发布于 2018-08-15 10:36:13
基本上，您需要向您的svg element、ng-mouseenter和ng-mouseleave添加2个指令，它们映射到控制器和工具提示容器中的方法。然后将$event传递给适当的方法，添加一些css属性和一个活动类。下面是一个有效的示例：
App = angular
.module('app', [])
.controller('MainController', MainController);
function MainController($scope, $element){
const ttElem = angular.element($element[0].querySelector('.tooltip'));
$scope.showTooltip = function(event){
ttElem.css('left', event.pageX + 'px');
ttElem.css('top', event.pageY + 'px');
ttElem.html('Content Here');
ttElem.addClass('active');
}
$scope.removeTooltip = () => {
ttElem.removeClass('active');
}
}.tooltip {
pointer-events: none;
position: absolute;
font-size: 18px;
text-align: center;
background: white;
padding: 10px 15px;
z-index: 1;
height: 30px;
line-height: 30px;
margin: 0 auto;
color: #21669e;
border-radius: 5px;
box-shadow: 0 0 0 1px #eee;
display: none;
}
.tooltip.active {
display: block;
border: 1px solid lightgray;
white-space: nowrap;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<svg>
<g class="toolfaces">
<circle class="lg" ng-mousemove="showTooltip($event)" ng-mouseleave="removeTooltip($event)" cx="50" cy="50" r="40" fill="red"/>
</g>
</svg>
<div class="tooltip"></div>
</div>
Stack Overflow用户
发布于 2018-08-15 19:56:05
就像罗伯特说的。如果您对简单的工具提示感到满意，那么只需使用<title>元素。这些是HTML中title="..."属性的SVG等效项
svg {
width: 100px;
}<td ng-if="fldc.selected && fldc.itemStatus != undefined">
<span ng-if="fldc.itemStatus">
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" style="margin: 1px;">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="black"/>
<path class="checkmark__check" stroke="limegreen" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
<title>Yes!</title>
</svg>
</span>
<span ng-if="!fldc.itemStatus">
<svg class="checkmark1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" style="margin: 1px;">
<circle class="checkmark__circle1" cx="26" cy="26" r="25" fill="black" />
<path class="checkmark__check1" stroke="limegreen" d="M16 16 36 36 M36 16 16 36" />
<title>No!</title>
</svg>
</span>
</td>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51843014
复制相关文章
相似问题