BinaryDevelop
  1. ホーム
  2. css

HTML-ツールチップのマウスポインタからの相対位置

2023-10-22 20:59:49

質問

マウスポインタの右下という自然なスタイルでツールチップを配置するにはどうしたらよいでしょうか。 

<!DOCTYPE html>
<html>
<head>
  <title>Tooltip with Image</title>
  <meta charset="UTF-8">
  <style type="text/css">
    .tooltip {
        text-decoration:none;
        position:relative;
    }
     .tooltip span {
        display:none;
    }
     .tooltip span img {
        float:left;
    }
     .tooltip:hover span {
        display:block;
        position:absolute;
        overflow:hidden;
    }
  </style>
</head>
<body>
  <a class="tooltip" href="http://www.google.com/">
    Google
    <span>
      <img alt="" src="http://www.google.com/images/srpr/logo4w.png">
    </span>
  </a>
</body>
</html>

どのように解決するのですか？

デフォルトのツールチップの動作は、単に title 属性を追加するだけです。ただし、これには画像を含めることはできません。 

<div title="regular tooltip">Hover me</div>

あなたが質問を明確にする前に、私は純粋なJavaScriptでこれを行いました、あなたがそれを見つけることを願っています。画像はポップアップし、マウスを追います。

jsFiddle

JavaScript 

var tooltipSpan = document.getElementById('tooltip-span');

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

CSS 

.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

複数の要素に対する拡張

複数の要素がある場合の一つの解決策は、すべてのツールチップの span を更新し、マウス移動時にそれらをカーソルの下に設定することです。

jsFiddle 

var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します