將鼠標懸停在svg圓圈上顯示每個元素的工具提示

Question

我正在為自己設計一個網站。 當我將鼠標懸停在每個svg圓上時，我應該創建三個svg圓，以顯示不同的工具提示圖像。 我已經嘗試過了，但是沒有用。 當我使用push類將所有三種顏色都推到屏幕的右側時，我正在使用materialcss框架，從而留出一些空白。

 $('svg[data-toggle="tooltip"]').tooltip({ animated: 'fade', placement: 'bottom', html: true }); 

 <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="col l1 m1 s1 push-l9"> <svg height="100" width="100" data-toggle="tooltip" title="<img src='images/4%20projects%202.jpg' style='height:100px;width:100px' />"> <circle cx="50" cy="50" r="10" stroke-width="3" fill="#f0584f" /> </svg> </div> <div class="col l1 m1 s1 push-l9"> <svg height="100" width="100"> <circle cx="50" cy="50" r="10" stroke-width="3" fill="#3166ff" /> </svg> </div> <div class="col l1 m1 s1 push-l9"> <svg height="100" width="100"> <circle cx="50" cy="50" r="10" stroke-width="3" fill="#5fb336" /> </svg> </div> </div> </div> 

這是當前的主屏幕

Answer 1

我通過CSS創建了自己的自定義工具提示。 這項研究花了我一天的時間來完成任務。

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