기본 툴팁 비활성화

Question

다음은 툴팁 스크립트 http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/입니다. 모든 브라우저에서 잘 작동하지만 기본 툴팁은 IE에서 비활성화되어 있지 않습니다.

기본 툴팁을 사용하지 않도록 설정하려면 다음 스크립트를 어떻게 업데이트합니까?

<script type="text/javascript"> 
$(document).ready(function() { 
    // Tooltip only Text 
    $('.masterTooltip').hover(function(){ 
     // Hover over code 
     var title = $(this).attr('title'); 
     $(this).data('tipText', title).removeAttr('title'); 
     $('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow'); 
    }, function() { 
     // Hover out code 
     $(this).attr('title', $(this).data('tipText')); 
     $('.tooltip').remove(); 
    }).mousemove(function(e) { 
      var mousex = e.pageX + 20; //Get X coordinates 
      var mousey = e.pageY + 10; //Get Y coordinates 
      $('.tooltip').css({ top: mousey, left: mousex }) 
    }); 
}); 
</script> 

Answer 1

흐림 효과가있는 요소에 title 속성을 다시 추가 할 이유가 없습니다. jQuery 메타 데이터에 저장되어있다. 내 생각 엔 IE가 여전히 그것을 보여주고있는 이유입니다. 줄을 제거하십시오

 $(this).attr('title', $(this).data('tipText')); 

그리고 수정되었는지 확인하십시오.

---

편집 : 일부 요구 사항을 충족하지 못했습니다. 이 테스트되지 않은,하지만 작동 할 수 있습니다 : 그것은 each 블록에 두 번 $(this)를 호출로이 하위 최적

$(document).ready(function() { 
    $('.masterTooltip').each(function() { 
     var title = $(this).attr('title'); 
     $(this).data('tipText', title).removeAttr('title'); 
    }).hover(function(){ 
     $('<p class="tooltip"></p>') 
     .text($(this).data('tipText')) 
     .appendTo('body') 
     .fadeIn('slow'); 
    }, function() { 
     $('.tooltip').remove(); 
    }).mousemove(function(e) { 
     var mousex = e.pageX + 20; 
     var mousey = e.pageY + 10; 
     $('.tooltip') 
     .css({ top: mousey, left: mousex }) 
    }); 
}); 

하는 것으로,하지만 고칠 수있을만큼 쉽게해야합니다.

Answer 2

IE 나 다른 브라우저의 왼쪽/오른쪽 하단에 표시된 기본 툴팁을 비활성화하는 간단한 해결책이 있습니다.

그냥 간단한 자바 스크립트 함수를

function GoToLink() 
    { 
     location.href = "mypage.htm"; 
    } 

전화

같은 태그에이 기능을 쓰기 [기본 툴팁이 동일하면 내가 언급 한 바와 같이]

<a id="204" name="wow" class="SettPage" href="" onclick="GoToLink()">