2015-01-14 3 views
1

테이블의 행 위에 마우스를 올리면 이미지가 표시되고 이미지 위에 마우스를 올리면 툴팁이 표시됩니다. 툴팁 (예 : test1, test2)의 옵션 위에 마우스를 올려 놓으면 마우스 커서가 놓이는 옵션이 강조 표시되거나 툴팁의 어떤 옵션을 클릭할지 알 수 있도록 배경색을 변경해야합니다. 당신이 ID를 사용하는 경우에 대한 조심해야 http://jsfiddle.net/0w9yo8x6/66/툴팁에서 마우스 오버시 배경색 변경

:이 당신을 위해 무엇을 찾고있는 것입니다 내가 생각

$(function() { 
    var rowData; 
    $(document).tooltip({ 
     items: "img, [data-title]", 
     content: function() { 
      var element = $(this); 
      if (element.is("img")) 
      { 
       rowdata = element.attr("data-title"); 
       $(document).off('click', '#test'); 
       $(document).on('click', '#test', function() { 
        test(); 
       }); 


      } 

      return $(this).prop('title'); 
     }, 
     show: null, 
     close: function (event, ui) { 
      ui.tooltip.hover(

      function() { 
       $(this).stop(true).fadeTo(1000, 1); 
      }, 

      function() { 
       $(this).stop(true).fadeOut(200, function() { 
        $(this).remove(); 
       }) 
      }); 
     }, 
     position: { 
      my: "left", 
      at: "right" 
     } 
    }); 
}); 



$(function() { 
    $('.one').attr('title', $('.myTooltipTable').remove().html()); 
    $(document).tooltip(); 
}); 

답변

1

: 바이올린 아래 http://jsfiddle.net/0w9yo8x6/65/

을 찾아주세요 자바 스크립트 코드 샘플입니다 클래스 사용시기

.toolTipHover:hover { 
    background-color:lightgray; 
} 

<table class="myTooltipTable" style="position:absolute;"> 
    <tr><td> <span id="test" class="toolTipHover">test1</span></td></tr> 
    <tr><td> <span id="test" class="toolTipHover">test2</span></td></tr> 
</table> 

위의 html에는 id = "test"와 다른 두 가지가 있습니다. DOM에 고유 한 ID가 있어야하기 때문에 그 중 하나만 등록해야합니다 (첫 번째 등록). 그래서 나는 toolTipHover 클래스를 구현하고 그 클래스에 CSS를 적용했다.

다른 코드를 건드리지는 않았지만 코드가 고유한지 확인하고 동일한 기능을 적용하려는 다중 요소가있는 경우 클래스를 추가하는 것이 좋습니다. 최선의 선택이되어야합니다.

1

HTML을 편집하고 다른 클래스를 추가 할 필요가 없습니다.

$(function() { 
 
    var rowData; 
 
    $(document).tooltip({ 
 
     items: "img, [data-title]", 
 
     content: function() { 
 
      var element = $(this); 
 
      if (element.is("img")) 
 
      { 
 
       rowdata = element.attr("data-title"); 
 
       $(document).off('click', '#test'); 
 
       $(document).on('click', '#test', function() { 
 
        test(); 
 
       }); 
 
        
 
    
 
      } 
 
      
 
      return $(this).prop('title'); 
 
     }, 
 
     show: null, 
 
     close: function (event, ui) { 
 
      ui.tooltip.hover(
 

 
      function() { 
 
       $(this).stop(true).fadeTo(1000, 1); 
 
      }, 
 

 
      function() { 
 
       $(this).stop(true).fadeOut(200, function() { 
 
        $(this).remove(); 
 
       }) 
 
      }); 
 
     }, 
 
     position: { 
 
      my: "left", 
 
      at: "right" 
 
     } 
 
    }); 
 
}); 
 

 

 

 
$(function() { 
 
    $('.one').attr('title', $('.myTooltipTable').remove().html()); 
 
    $(document).tooltip(); 
 
});
td.myData > img { 
 
    display: none; 
 
    float:right; 
 
    height: 19px; 
 
} 
 
td.myData:hover > img { 
 
    display: inline-block; 
 
} 
 
.ui-tooltip-content span { 
 
    transition:all 0.4s ease-in-out; 
 
} 
 

 
.ui-tooltip-content span:hover { 
 
    background-color:Orange; 
 
    transition:all 0.4s ease-in-out; 
 
}
<script> 
 
     function test(){ 
 
    \t alert("test invoked"); 
 
    
 
    } 
 
    
 

 
</script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" /> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
 

 
<table class="myTooltipTable" style="position:absolute;"> 
 
    <tr><td> <span id="test" >test1</span></td></tr> 
 
    <tr><td> <span id="test" >test2</span></td></tr> 
 
</table> 
 

 
<br/><br><br> 
 
<table border="1"> 
 
<tr> 
 
<td class="myData">Data1 <img class="one" id="one" data-title="Data1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" /> 
 
<img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td class="myData">Data2 <img class="one" id="one" data-title="Data2" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" /> 
 
<img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td class="myData">Data3 <img class="one" id="one" data-title="Data3" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" /> 
 
<img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/> 
 
</td> 
 
</tr> 
 
</table>

:

.ui-tooltip-content span:hover { 
    background-color:Orange; 
    transition:all 0.4s ease-in-out; 
} 

아래의 전체 코드를 참조하십시오 : 당신은 아래의 코드를 추가해야

: 당신은 간단한 CSS 호버 효과를 추가하여이를 달성 colud

관련 문제