読者です 読者をやめる 読者になる 読者になる

おまじないの綴り方

spelling of a logical spell

画面の端に来ても隠れないツールチップをjsとCSSで実装する

目標

f:id:miyatsuki_yatsuki:20170325170817g:plain

前フリ

spell-spell.hatenablog.com

考え方

  • マウスが特定の位置より下(右)までいったら、ツールチップがそれより下(右)まで行かないようにする
    • 具体的は window.pageYOffset + window.innerHeight - getBoundingClientRect().height と マウスのy座標を比較し、より小さい方(=上にある方)をツールチップのy座標として使用する
    • x座標について考える場合はy→x, height→widthにする

f:id:miyatsuki_yatsuki:20170325171211p:plain

コード

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

問題点

右端にマウスを寄せると、ツールチップにマウスが乗ってしまい悲しい感じになる

f:id:miyatsuki_yatsuki:20170325172513g:plain