マウスの上に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%; 
    } 

そうでない場合はを編集したい場合は、次のように試してみてください：

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%; 
} 

あなたは...微調整する