div 위에 마우스를 올리면 마우스를 따라가는 툴팁 만 사용하고 싶습니다.마우스 뒤를 따르는 Jquery 툴팁
http://flowplayer.org/tools/tooltip/
을 그리고 난 그것이 그러나 내가 실제로 마우스 포인터를 움직일 때 마우스를 따라 툴팁을 얻을 수, 작업이 : 나는이 하나를 사용하고 싶습니다. 나는 어리석은 질문처럼 들리지만 사이트에는이 기능의 데모가 없으므로 지원되는지 궁금해졌습니다. 누구든지이 작품을 만드는 방법을 알고 있습니까? 귀하의 의견과 시간을 보내 주셔서 감사합니다!
나는 사이트에서 this을 (를) 발견했습니다.
하지만 난 .. 내 자신의 떨어져 일을하는 것과 유 조금 밖으로, 작은 예를 돕기 위해 ... 난 당신이 당신의 자신의 툴팁을한다면
<style>
.item {
position: relative;
width: 100px;
height: 40px;
top: 200px;
left: 400px;
background: #CCC;
}
.item .tooltip {
position: fixed; /** depends on how it handles the e.pageX and e.pageY **/
width: 80px;
height: 30px;
background: #06F;
z-index: 10;
display: none; /**let the tooltip be not visable, when startup **/
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".item").mousemove(function(e) {
// put other effect in when moving over the element
// from e you can get the pageX(left position) and pageY(top position)
// im not sure if it was the relative or the absolute position
// i added 10 pxs on the top and left to show the tooltip a bit after
$('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');
});
$(".item").mouseout(function() {
$('.tooltip').css('display', 'none');
});
});
</script>
<div class="item">
<p>This is my item</p>
<div class="tooltip">Tooltip</div>
</div>
..하지만 최대 당신에게 무엇을 원하는 분
wrt http://flowplayer.org/tools/demos/tooltip/dynamic.htm, 시도해보십시오
// initialize tooltip
$("#dyna img[title]").tooltip({
// tweak the position
offset: [10, 2],
// use the "slide" effect
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } })
// Additional code : BEGIN
.mousemove(function(evt) {$(".tooltip").css({
left:(evt.pageX - $.tools.tooltip.conf.offset[1]),
top:(evt.pageY - $.tools.tooltip.conf.offset[0])
});})
// Additional code : END
;
직접 위치를 조정하십시오. :)
자신의 웹 사이트에있는 예제를 사용하면 이것은 jQuery를 mousemove event 및 mouse positioning information 사용이
<script>
$("#demo img[title]").tooltip();
$(".tooltip").css('position','absolute');
$("#demo").mousemove(function(e) {
var x_offset = -100;
var y_offset = -130;
$('.tooltip').css('left', e.pageX + x_offset).css('top', e.pageY + y_offset);
});
</script>
에이
<script>
$("#demo img[title]").tooltip();
</script>
를 돌 수 있었다. 툴팁의 CSS position은 absolute으로 설정되어있어 마우스를 올바르게 따라갈 수 있습니다.
이것은 jq ui 1.12.1에서 작동합니다. – kodmanyagha
해결이 질문? –