画面の端に来ても隠れないツールチップをjsとCSSで実装する
目標
- javascript + CSS でツールチップ機能を実装する
- 画面の端の方にマウスが来てもツールチップが隠れないようにする
前フリ
考え方
- マウスが特定の位置より下(右)までいったら、ツールチップがそれより下(右)まで行かないようにする
- 具体的は window.pageYOffset + window.innerHeight - getBoundingClientRect().height と マウスのy座標を比較し、より小さい方(=上にある方)をツールチップのy座標として使用する
- x座標について考える場合はy→x, height→widthにする
コード
<html> <style> <!--ツールチップの見た目--> span#tooltip{ position: absolute; <!--座標で表示位置を直接コントロールできるようにする--> z-index: 10; <!--他の要素より前に表示されるように--> visibility: hidden; <!--最初は隠しておく--> padding: 0 5px; background-color: #FFF; } <!--ツールチップを表示させる部分の見た目。わかればなんでもいい--> div { background: #abcdef; width:300px; height:300px; } </style> <html> <style> span#tooltip{ position: absolute; z-index: 10; visibility: hidden; padding: 0 5px; background-color: #FFF; } div { background: #abcdef; width:300px; height:300px; } </style> <body> <span id="tooltip">hoge</span> <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div> <br> <br> <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div> <script type="text/javascript"> function over() { var tooltip = document.getElementById("tooltip"); tooltip.style.visibility = "visible"; } function out() { var tooltip = document.getElementById("tooltip"); tooltip.style.visibility = "hidden"; } function move(){ var tooltip = document.getElementById("tooltip") //前のバージョン //var xPos = event.pageX + 10; //var yPos = event.pageY - 10; //上で説明したように、ツールチップが隠れてしまわないように適切な座標を選択する var xPos = Math.min(event.pageX + 10, window.pageXOffset + window.innerWidth - tooltip.getBoundingClientRect().width - 10); var yPos = Math.min(event.pageY - 20, window.pageYOffset + window.innerHeight - tooltip.getBoundingClientRect().height -20); tooltip.style.top = yPos + "px"; tooltip.style.left = xPos + "px"; tooltip.innerHTML = "xPos:" + xPos + "<br/>" + "yPos:" + yPos; } </script> </body> </html>
問題点
右端にマウスを寄せると、ツールチップにマウスが乗ってしまい悲しい感じになる