호버트 할 수있는 툴팁 만들기

Question

여기 내가 시도한 것의 demo입니다.

기본적으로 툴팁 효과를 만들려고합니다. 도구 설명 영역을 탐색 할 때 상자가 깜박입니다. mouseleave 및 mouseenter이 발생했기 때문입니다.

기본 구조는이

<section id="tooltipContainer"> 
    <ul> 
     <li> 
      <a>Text that is show up</a> 
      <div class="extension"> <!-- Tool Tip Division --> 
       text 
      </div> 
     </li> 
    </ul> 
</section> 

같은이 tootip 효과를 만드는 것입니다, 내가이

$("li").on('mouseenter', function() { 
    $(this).children(".extension").stop().fadeIn(); 
}).on('mouseleave', function() { 
    $(this).children(".extension").stop().delay(500).fadeOut(); 
});​ 

mouseleave 및 mouseenter을 유발하지 않도록하는 방법?

업데이트 :

패딩 값을 전환하여, 내가 깜박이는 제거 할 수 있었다, 그러나 컨테이너 이후도 이제 전체 툴팁을 차단 overflow:hidden; 있습니다. 어떤 아이디어? here

Answer 1

두 번째 바이올린이는 첫 번째 그래도 괜찮 았는데 툴팁을 숨 깁니다 매우 혼란 : 여기

은이 업데이트의 바이올린입니다. 그것은 나를 위해 전혀 플래시되지 않습니다 (크롬), 그냥 툴팁처럼 일반적으로 행동 - 호버에 표시하고 마우스를 멀리 이동할 때 사라집니다.

tipsy.js을 사용하는 것이 좋습니다.이 도구는 멋진 jQuery 플러그인으로 작업을보다 빠르고 쉽게 수행하고 크로스 브라우저 호환성을 향상시킬 수 있습니다.