おまじないの綴り方

spelling of a logical spell

マウスの位置によって表示位置を変えるツールチップをjsとCSSで実装する

目標

f:id:miyatsuki_yatsuki:20170325174822g:plain

前フリ

spell-spell.hatenablog.com

spell-spell.hatenablog.com

考え方

  • 画面内のマウスの位置に応じてツールチップの表示位置を変える
  • マウスが画面左上よりにいたら、ツールチップは右下方向へ、左下なら右上へといったように変えていく

コード

<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);

        var xPos = 0;
        if(event.pageX < window.innerWidth/2) //マウスカーソル位置が画面の左半分側かどうか
        {
          xPos = event.pageX + 10; //左半分にいたらカーソル位置の右側にツールチップを表示
        }
        else
        {
          xPos = event.pageX - tooltip.getBoundingClientRect().width - 10; //右側にいたらカーソルの右側にツールチップを表示
        }

        var yPos = 0;
        if(event.pageY < window.innerHeight/2) //マウスカーソル位置が画面の上半分かどうか
        {
          yPos = event.pageY + 10 //上半分にいたらカーソル位置の下にツールチップを表示
        }
        else
        {
          yPos = event.pageY - tooltip.getBoundingClientRect().height - 10; //下半分にいたらカーソル位置の上にツールチップを表示
        }


        tooltip.style.top = yPos + "px";
        tooltip.style.left = xPos + "px";
        tooltip.innerHTML = "xPos:" + xPos + "<br/>" + "yPos:" + yPos;
      }
    </script>
  </body>
</html>

問題点

ツールチップの内容が、画面サイズに対して一定以上大きい場合、結局ツールチップが隠れたり、重なってしまったりする問題は起きうる

ただ、これ以上はツールチップの位置よりも中身や表示サイズなどを工夫したほうが良さそう