SVGのツールチップを追加するには？

Question

私の先生は、サークル上にマウスを置くと、いくつかのリンクといくつかの情報があるSVGサークルに関するツールチップを表示するように私に依頼します。そして、彼らは私にjQuery UIを使うヒントを与えました。しかし、私はこの種のツールチップについて多くのことを検索しましたが、真剣に私を助けることはできないようです。

Answer 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 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> 

私は自分のカスタムツールチップをCSSで作成しました。この研究は私に仕事を完了させるためにある日かかりました。