web-dev-qa-db-ja.com

マウスポインターに対するHTMLツールチップの位置

ツールチップを自然なスタイルに合わせる方法：マウスポインターの右下？

<!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>
cssalignmenttooltip
48
Ben

デフォルトのツールチップの動作については、単に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;
}

複数の要素の拡張

複数の要素に対する1つの解決策は、すべてのツールチップ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;
    }
};
84
Daniel Imms

JSなしでこれを行う1つの方法は、ホバーアクションを使用して、他の方法では非表示になっているHTML要素を表示することです。このコードペンを参照してください。

http://codepen.io/c0un7z3r0/pen/LZWXEw

ツールチップのコンテンツを含むスパンは、親liに相対的であることに注意してください。魔法はここにあります：

ul#list_of_thrones li > span{
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  display:block;
  ...
}

ご覧のとおり、listitemをホバーしない限りスパンは非表示になり、スパン要素が表示されます。スパンには必要なだけのhtmlを含めることができます。添付のコードペンでは、矢印にも：after要素を使用しましたが、これはもちろん完全にオプションであり、この例に含まれているのは化粧目的のみです。

これが役立つことを願っています。他のすべての回答にはJSソリューションが含まれていたが、OPはHTML/CSSのみのソリューションを求めていたので、投稿しなければならないと感じました。

10
Anthony Cregan

JQuery UIプラグインを使用できます。以下は参照URLです

マウスポインタを基準としたツールチップの位置のトラックをTRUEに設定します。

$('.tooltip').tooltip({ track: true });
7
Atul Bhosale

私はこのテクニックが好きです：

function showTooltip(e) {
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .tooltip {
    display: block;
}

.tooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    color: black;
}
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.

（ this Fiddle も参照）

6
John Slegers

Angularjsの「ディレクティブ」を使用して同じことを実現できます。

            //Bind mousemove event to the element which will show tooltip
            $("#tooltip").mousemove(function(e) {
                //find X & Y coodrinates
                x = e.clientX,
                y = e.clientY;

                //Set tooltip position according to mouse position
                tooltipSpan.style.top = (y + 20) + 'px';
                tooltipSpan.style.left = (x + 20) + 'px';
            });

詳細については、この投稿を確認してください。 http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html

3
AugustRush