Javascript 如何为SVG添加工具提示？

我的老师让我在SVG圆圈上显示一个工具提示，当我们将鼠标悬停在圆圈上时，它有一些链接和一些信息。他们给了我使用jQueryUI的技巧。但是我已经搜索了很多关于这类工具提示的信息，说真的，似乎没有什么能帮助我。

.priority order svg{
.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 height="40" width="100" class="">
              <circle cx="30" cy="30" r="10" stroke-width="3" fill="#5fb336" />
                <span>Clear</span>
    </svg></a>
                    </div>  

                     <div class="">
<a class="right tooltips1" href="#"><svg height="40" width="100" class="">
              <circle cx="30" cy="30" r="10" stroke-width="3" fill="#3166ff" />
                <span>Issue</span>
    </svg></a>   
                    </div>


                <div class="">
<a class="right tooltips2" href="#"><svg height="40" width="100" class="">
              <circle cx="30" cy="30" r="10" stroke-width="3" fill="#f0584f" />
                <span>Alert</span>
    </svg></a>   
                    </div>

            </div>
            </div>

浮动：对；
左边距：-25px；
}
/*工具提示绿色点*/
a、 工具提示{
位置：相对位置；
右：5px；
浮动：对；
}
a、 工具提示范围{
位置：绝对位置；
宽度：80px；
颜色：#FFFFFF；
背景#5FB336；
高度：29px；
线高：29px；
文本对齐：居中；
可见性：隐藏；
边界半径：8px；
}
a、 工具提示范围：之后{
内容：''；
位置：绝对位置；
底部：100%；
左：50%；
左边距：-8px；
宽度：0；高度：0；
边框底部：8px实心#5FB336；
右边框：8px实心透明；
左边框：8px实心透明；
}
a:悬停。工具提示跨度{
能见度：可见；
不透明度：1；
顶部：50px；
左：30%；
左边距：-57px；
z指数：999；
光标：指针；
}
/*工具提示1蓝色点*/
a、 工具提示1{
位置：相对位置；
右：5px；
浮动：对；
}
a、 工具提示1跨度{
位置：绝对位置；
宽度：80px；
颜色：#FFFFFF；
背景#3166ff；
高度：29px；
线高：29px；
文本对齐：居中；
可见性：隐藏；
边界半径：8px；
}
a、 工具提示1范围：之后{
内容：''；
位置：绝对位置；
底部：100%；
左：50%；
左边距：-8px；
宽度：0；高度：0；
边框底部：8px实心#3166ff；
右边框：8px实心透明；
左边框：8px实心透明；
}
a:hover.tooltips1 span{
能见度：可见；
不透明度：1；
顶部：50px；
左：30%；
左边距：-57px；
z指数：999；
光标：指针；
}
/*工具提示1红色点*/
a、 工具提示2{
位置：相对位置；
右：5px；
浮动：对；
}
a、 工具提示2跨度{
位置：绝对位置；
宽度：80px；
颜色：#FFFFFF；
背景：#f0584f；
高度：29px；
线高：29px；
文本对齐：居中；
可见性：隐藏；
边界半径：8px；
}
a、 工具提示2跨度：之后{
内容：''；
位置：绝对位置；
底部：100%；
左：50%；
左边距：-8px；
宽度：0；高度：0；
边框底部：8px实心#f0584f；
右边框：8px实心透明；
左边框：8px实心透明；
}
a:hover.tooltips2 span{
能见度：可见；
不透明度：1；
顶部：50px；
左：30%；
左边距：-57px；
z指数：999；
光标：指针；
}

---

我用CSS创建了自己的自定义工具提示。这项研究花了我一天时间完成任务。

我投票把这个问题作为主题来讨论，因为这不是一个代码编写服务，请展示你的努力。为什么这个标记为C++？