如何为 SVG 添加工具提示？ [复制]

Posted 2023-02-22

【中文标题】如何为 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 创建了自己的自定义工具提示。这项研究花了我一天时间才完成。