Question

当我将鼠标悬停在svg元素上时，应该显示工具提示。

我希望工具提示是一个易于使用的UI创建工具。

约束是svg元素是通过编程方式创建的，因此我不知道如何创建用于动态组件渲染的模板引用程序。

我的问题是如何构建一个角度组件作为动态svg元素的工具提示？

这里是sample的堆叠闪电战。我编写了动态组件的代码。现在，当我将鼠标悬停在圆圈上时，应该动态渲染它。

<html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <style>
    .bs-example{
        margin: 20px;
    }
    .accordion .fa{
        margin-right: 0.5rem;
    }
</style>
<script>
    $(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.show").each(function(){
        	$(this).prev(".card-header").find(".fa").addClass("fa-minus-circle").removeClass("fa-plus-circle");
        });
        
        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
        	$(this).prev(".card-header").find(".fa").removeClass("fa-plus-circle").addClass("fa-minus-circle");
        }).on('hide.bs.collapse', function(){
        	$(this).prev(".card-header").find(".fa").removeClass("fa-minus-circle").addClass("fa-plus-circle");
        });
    });
</script>
</head>
<body>
<div class="container bs-example"><!--main contain start-->
    <div class="accordion greyboxshadow oneborder offset-md-0" style="border-radius: 3px;" id="accordionExample"><!--Full div where the bg color and border color given-->
        <div class="card"><!--inside of that acordian start-->
            <div class="grad-bg grad card-header" id="headingOne"><!--accordion heading div-->
                <h2 class="mb-0">
                    <button type="button" class="btn-plus btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus-circle"></i> What is HTML?</button><!--accordion button and plus and minus icon added-->									
                </h2>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"><!--This div is show the expand after clicking plus sign-->
                <div class="card-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages.</p>
                </div>
            </div>
        </div>
		</div>
		</div>
		</body>
		</html>

Answer 1

您可以通过创建自定义组件或直接在SVG上使用工具提示来添加它。无论哪种方式，您都希望通过使用RxJS直接观看SVG或circle元素的mouseover和mouseout事件。

您可以在此分叉的堆叠闪电战中看到一个示例。

https://stackblitz.com/edit/angular-9vgjjl-7qmneg?file=app%2Ftooltip-overview-example.ts

以编程方式创建角度组件工具提示

1 个答案: