讓div出現在鼠標上

Question

我想讓一個div .description出現鼠標懸停在某個元素上的位置。

到目前爲止，我有使DIV該代碼出現在一個固定的位置：但

$('.tooltip').mouseover(function(e) { 
    // var to link tooltips and hand to description 
    var target = $(this).attr('data-show'); 

    // hide current description if showing 
    if ($('.description').is(':visible')) { 
    $('.description').fadeOut(0); 
    }; 

    e.stopPropagation(); 
    $('#' + target).fadeIn(400); 
}); 

$('body').mouseover(function(){ 
    $('.description').fadeOut(0); 
}); 

它正常工作，而不是僅僅有.description出現，我需要它出現在鼠標懸停。

我嘗試添加該功能：

function divPosition (event){ 
    // pass mouse position to description div css 
    $(".description").css({top: event.clientY, left: event.clientX- 200}); 
}; 

，但沒有奏效。我也嘗試添加該函數內的行，但我不知道如何傳遞事件參數。

請參閱我的jsfiddle：https://jsfiddle.net/bns4zp1q/2/

任何幫助或洞察力我怎樣才能提高我的代碼將非常感激。謝謝

Answer 1

您可以收聽mousemove事件，並使用您的divPosition功能。

https://jsfiddle.net/agbuLop1/

$('.tooltip').mousemove(divPosition); 

function divPosition (event){ 
    // pass mouse position to description div css 
    $(".description").css({top: event.clientY, left: event.clientX- 200}); 
}; 

Answer 2

是否真的說明也要跟着鼠標移動或只是出現在懸停的圈子？這裏是一個快速和骯髒的例如無javascript：

https://jsfiddle.net/k9jpqom2/1/

（新）HTML：

<div class="tooltip-container"> 
    <div class="image" id="machine1"> 
     <img src="http://axevilw.sellamachine.com/EnhFiles/advert/182/Machine.jpg/Machine.jpg"> 
     <div class="tooltip" id="tooltip1" data-show="description1">1 
      <div class="description-container"> 
      <div class="description" id="description1"> 
       LED Strip Lighting 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

（附加）CSS

.description-container { 
    width:1px;height:1px;position:relative; 
} 
#tooltip1:hover .description { 
    display:block; 
    width:10em; 
    position:absolute; 
    left:-4em; 
    height:auto; 
} 
.tooltip{ 
    width:5%; 
    height: 6%; 
    } 

如果你不這樣做想編輯HTML你可以嘗試這樣的事情：

https://jsfiddle.net/g2p5g2r4/2/

.tooltip .description-container { 
    width:1px; 
    height:1px; 
} 

#tooltip1:hover + .description-container #description1 { 
    display:block; 
    width:10em; 
    position:absolute; 
    height:auto; 
    top: 36%; 
    left: 25%; 
} 
#tooltip1 { 
    top: 31%; 
} 

您將有微調＃說明1，＃2行說明等的位置...