如何为 SVG 添加工具提示? [复制]
Posted
技术标签:
【中文标题】如何为 SVG 添加工具提示? [复制]【英文标题】:How to add tooltip for SVG? [duplicate] 【发布时间】:2017-12-23 02:59:17 【问题描述】:当我们将鼠标悬停在圆圈上时,我的老师要求我在 SVG 圆圈上显示一个工具提示,其中包含一些链接和一些信息。他们给了我使用 jQuery UI 的提示。但是我已经搜索了很多关于这种工具提示的内容,严重的是似乎没有什么可以帮助我。
【问题讨论】:
我投票结束这个问题作为题外话,因为 SO 不是代码编写服务,请展示你的努力 为什么这个标签是 C++? 【参考方案1】:.priority-order svg
float: right;
margin-left: -25px;
/*tooltips green color dot*/
a.tooltips
position: relative;
right: 5px;
float: right;
a.tooltips span
position: absolute;
width: 80px;
color: #FFFFFF;
background: #5FB336;
height: 29px;
line-height: 29px;
text-align: center;
visibility: hidden;
border-radius: 8px;
a.tooltips span:after
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #5FB336;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.tooltips span
visibility: visible;
opacity: 1;
top: 50px;
left: 30%;
margin-left: -57px;
z-index: 999;
cursor: pointer;
/*tooltips1 blue color dot*/
a.tooltips1
position: relative;
right: 5px;
float: right;
a.tooltips1 span
position: absolute;
width: 80px;
color: #FFFFFF;
background: #3166ff;
height: 29px;
line-height: 29px;
text-align: center;
visibility: hidden;
border-radius: 8px;
a.tooltips1 span:after
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #3166ff;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.tooltips1 span
visibility: visible;
opacity: 1;
top: 50px;
left: 30%;
margin-left: -57px;
z-index: 999;
cursor: pointer;
/*tooltips1 red color dot*/
a.tooltips2
position: relative;
right: 5px;
float: right;
a.tooltips2 span
position: absolute;
width: 80px;
color: #FFFFFF;
background: #f0584f;
height: 29px;
line-height: 29px;
text-align: center;
visibility: hidden;
border-radius: 8px;
a.tooltips2 span:after
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #f0584f;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.tooltips2 span
visibility: visible;
opacity: 1;
top: 50px;
left: 30%;
margin-left: -57px;
z-index: 999;
cursor: pointer;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="priority-order">
<div class="">
<a class="right tooltips" href="#"><svg class="">
<circle cx="30" cy="30" r="10" stroke- fill="#5fb336" />
<span>Clear</span>
</svg></a>
</div>
<div class="">
<a class="right tooltips1" href="#"><svg class="">
<circle cx="30" cy="30" r="10" stroke- fill="#3166ff" />
<span>Issue</span>
</svg></a>
</div>
<div class="">
<a class="right tooltips2" href="#"><svg class="">
<circle cx="30" cy="30" r="10" stroke- fill="#f0584f" />
<span>Alert</span>
</svg></a>
</div>
</div>
</div>
我通过 CSS 创建了自己的自定义工具提示。这项研究花了我一天时间才完成。
【讨论】:
以上是关于如何为 SVG 添加工具提示? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
Angular UI-Select:如何为文本溢出添加工具提示?