svg circle에 마우스를 올리면 각 요소에 대한 툴팁이 표시됩니다.

Question

나 자신을위한 웹 사이트를 디자인하고 있습니다. 내가 가져 가거나 각 svg 원에 mouseenter가 다른 툴팁 이미지를 보여 주어야 할 때 나는 3 개의 SVG 원을 만들었습니다. 시도했지만 작동하지 않습니다. 푸시 클래스를 사용하여 화면의 오른쪽으로 세 가지 색을 모두 밀어 넣어 여백을 남기면 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>