マウスポインタの周りに余白があるか確認してください

Question

イメージ上にツールチップとしてビデオを表示するはずのカスタムツールチップ機能を構築しています。さて、私はいくつかの初期の作業をしていますが、私はマウスポインタの周りにツールチップを表示する場所を見つけ出すことに悩まされています。私は常に表示、マウスカーソルの右下にツールチップを持っています

、マウスが現在画面にある関係なく、これは私がこれまで持っているものです：

ツールヒントは私のターゲット要素である

window.onmousemove = function (e) { 
    var x = e.clientX, y = e.clientY; 
    tooltipSpan.style.top = (y + 10) + 'px'; 
    tooltipSpan.style.left = (x + 10) + 'px'; 
}; 

。 私が探しているのは、私のコードは画面上で利用可能なマウスの中で最大の領域を見つけてそこに表示するようにツールチップを調整するべきだということです。これのためのポインタは、多くの助けになります。

注：jQueryはオプションではありません。コアJSでビルドする必要があります。

Answer 1

1. あなたは、ビューポートの寸法を使用して、幅とwindow.innerWidthを使用して、ビューポートの寸法とwindow.innerHeight（コードがwindow内で実行されているので、私の例ではthis下のwindowを参照）

2. を得ることができますし、マウスの位置はev.clientX/Yを使用することができますピクセルの範囲を決定するカーソルの左/右と上/下側の例のように。

3. プロパティoffsetWidthを使用してoffsetHeight我々はツールチップの寸法を取得し、我々は、カーソル位置にツールチップの位置を設定するためにそれを使用することができます。たとえば、topLeft象限が最大の場合、ツールヒントはカーソルの左上に表示されます（ツールチップの右下がカーソルに「触れる」ことを意味します）。

この例が役立ちます:)。

var tooltip = this.document.getElementsByClassName("tooltip")[0]; 
 
window.onmousemove = function(ev) { 
 
    // Getting pixel space 
 
    var leftPixelSpace = ev.clientX; 
 
    var rightPixelSpace = this.innerWidth - leftPixelSpace; 
 
    var topPixelSpace = ev.clientY; 
 
    var bottomPixelSpace = this.innerHeight - topPixelSpace; 
 

 
    // Determining the position of topleft corner of the tooltip 
 
    var tooltipPosX = leftPixelSpace > rightPixelSpace ? leftPixelSpace - tooltip.offsetWidth : leftPixelSpace; 
 
    var tooltipPosY = topPixelSpace > bottomPixelSpace ? topPixelSpace - tooltip.offsetHeight : topPixelSpace; 
 
    
 
    // Setting tooltip position 
 
    tooltip.style.left = tooltipPosX+"px"; 
 
    tooltip.style.top = tooltipPosY+"px"; 
 
};

.tooltip { 
 
    width: 150px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    background-color : lightblue; 
 
    text-align: center; 
 
    position: absolute 
 
}

<div class="tooltip">floating tooltip</div>

Answer 2

これは何か？ A switchには、マウスカーソルがどの象限にあるかを計算するための条件があります。 widthMiddle、ウィンドウの幅の中点のため

var wM = window.innerWidth/2; 
 
var hM = window.innerHeight/2; 
 
document.addEventListener('mousemove', function(e) { 
 
    var w = e.clientX; 
 
    var h = e.clientY; 
 
    var pos; 
 
    switch (true) { 
 
     case (w <= wM && h <= hM): 
 
      pos = 'top-left'; 
 
      break; 
 
     case (w <= wM && h >= hM): 
 
      pos = 'bottom-left'; 
 
      break; 
 
     case (w > wM && h < hM): 
 
      pos = 'top-right'; 
 
      break; 
 
     case (w > wM && h > hM): 
 
      pos = 'bottom-right'; 
 
      break; 
 
\t default: 
 
      pos = undefined;//Here you could even assign a default quadrant to relay on, in case any condition is met. 
 
    } 
 
    console.log(pos); 
 
});

• wM。
• hM：高さが同じですが、
• wマウスの幅/ Xの位置。高さ/ Yの場合はhです。
• 象限システムによる条件に基づくスイッチ。