jquery 툴팁/마우스 이동으로 이동/마우스 위치로 툴팁

Question

jQuery Tools tooltip은 괜찮습니다!

하지만 마우스 이동 (마우스 위치와 관련된 툴팁)으로 이동하고 싶습니다. 내가 어떻게 할 수 있니? 아니면이 방법으로 다른 플러그인이 있습니까?

Answer 1

jQuery TOOLS 툴팁 플러그인으로는 불가능하다고 생각합니다.

Bassistance Tooltip plugin은 원하는 것을 지원합니다. this demo 같이 track: true을 사용

$('#yahoo a').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    showBody: " - ", 
    fade: 250 
}); 

---

을 해당 플러그인 마음에 들지 않으면, qTip2는 마우스 추적을 지원합니다. this demo (동등한 jsFiddle here)을 참조하십시오.

$('#demo-mouse').qtip({ 
    content: 'I position myself at the current mouse position', 
    position: { 
     my: 'top left', 
     target: 'mouse', 
     viewport: $(window), // Keep it on-screen at all times if possible 
     adjust: { 
      x: 10, y: 10 
     } 
    }, 
    hide: { 
     fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking! 
    }, 
    style: 'ui-tooltip-shadow' 
}); 

Answer 2

내가 jQuery를 도구 툴팁이 작업을 수행 .tooltip이

Answer 3

jQuery를 UI 지금은 버전 1.9으로 .tooltip() 위젯을 포함하는 CSS 클래스를, 그리고 지금있는 옵션을 제공합니다

$('#selector').mousemove(function(e) { 
    $('.tooltip').css('left', e.pageX + 5).css('top', e.pageY - 25).css('display', 'block'); 
}) 

track: true 마우스를 따라 툴팁을 만듭니다. 위젯을 초기화 할 때 그냥 옵션으로 지정

$(document).tooltip({ 
    track: true 
}); 

여기에 행동이 참조 : 이미 jQuery를 UI를 사용하고 다른 라이브러리를 포함하지 않는 경우 http://jqueryui.com/tooltip/#tracking

이 유용합니다. 나는 또한 첨부 추가 한 아래의 스크립트에서, http://api.jqueryui.com/tooltip/

Answer 4

HTML 당신이 원하는대로

<div id="tooltipWindow" class="tooltipContainer"> 
    <div></div> 
</div> 

는 CSS (스타일을 추가 :이 위젯에 대한 자세한 내용은 API를 확인하세요 툴팁 DIV에 요소의 클래스)

<style> 
    .tooltipContainer { 
     position: fixed; 
     height: auto; 
     width: auto; 
     background: ghostwhite; 
     padding: 10px; 
    } 
</style> 

JAVASCRIPT 당신이 JQuery와 - UI 툴팁을 사용하는 경우

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script> 
<script> 
    //Following Tooltip 
    $('.elementClassName').mousemove(function(e) { 
     if ($(this).attr('title') != "") { 
      $('#tooltipWindow div').html($(this).attr('title')); 
      $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class')); 
      $('#tooltipWindow').show(); 
     } 
    }); 
    $('.elementClassName').mouseleave(function (e) { 
     $('#tooltipWindow').hide(); 
     }); 
    } 

    //Non Following Tooltip 
    $('.elementClassName').hover(function(e) { 
     if ($(this).attr('title') != "") { 
      $('#tooltipWindow div').html($(this).attr('title')); 
      $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class')); 
      $('#tooltipWindow').show(); 
     } 
    },function (e) { 
     $('#tooltipWindow').hide(); 
     }); 
    } 

</script> 

Answer 5

$(function(){ window.onmousemove = function (e) { var tooltips = $('div.ui-tooltip'); var x = (e.clientX + 10) + 'px', y = (e.clientY + 10) + 'px'; for (var i = 0; i < tooltips.length; i++) { tooltips[i].style.top = y; tooltips[i].style.left = x; } }; });

, 그 코드 조각이 트릭을 할 것입니다 (jQuery를, jQuery 라이브러리를 포함하는 것을 잊지 말아, 나는 태그도 포함 추가) !