logo标签列表

HTML提示框相对于鼠标指针的位置

htmlcssalignmenttooltipmousehover
86
如何按自然风格对齐工具提示：对鼠标指针的右下方？
<!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>
1
你是否在使用jQuery？还是只用CSS/JavaScript？当鼠标悬停在元素上时，你需要跟随鼠标指针移动，还是只需在首次悬停对象时在一个位置显示一次工具提示？ - Stéphane V
没有jQuery，没有JavaScript，只有CSS。我不需要跟随，我只想要普通的工具提示行为。 - Ben
7个回答
118

要使用默认的工具提示行为，只需添加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;
    }
};
1
非常感谢！但是我需要在工具提示中添加图片，这才是关键。而且我不想使用任何JavaScript。再次感谢您。 - Ben
1
很遗憾，如果没有JavaScript，就无法跟踪鼠标。你所能做的最好的办法就是像你在示例中展示的那样显示。不使用JavaScript的原因是什么？ - Daniel Imms
如上所述，我不需要任何后续操作。 - Ben
如果你想要那个功能，你确实需要它 :) 现在几乎每个浏览器都已经打开了它。 - Daniel Imms
1
加上过渡，一切都完美了 :) - Huy Le
显示剩余2条评论
15

不使用JS的一种方法是使用鼠标悬停操作来显示本来隐藏的HTML元素，可以参考这个codepen：

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;
  ...
}

正如您所见，只有在将鼠标悬停在列表项上时，span 才会被显示出来，从而显示 span 元素。 span 可以包含任意数量的 HTML。在这个附加的 CodePen 中，我还使用了一个 :after 元素用于箭头，但这当然是完全可选的，并且仅在此示例中包含了美观目的。

希望这能有所帮助，我觉得有必要发帖，因为所有其他答案都包括 JS 解决方案，但 OP 要求仅使用 HTML/CSS 解决方案。

4
这与鼠标指针位置无关，而是与DOM元素相关。 - CrazySabbath
1
我的示例是相对于悬停元素而不是指针的。问题可能已经更新或者我误解了，无论哪种情况，给出的JS示例都是正确的解决方案，你不能仅使用CSS来实现这一点。我已经在其他地方相应地投票了。 - Anthony Cregan
不想说得太直白，但我不明白有什么可以误解的，标题已经说明了“相对于鼠标指针”。 - CrazySabbath
1
不想直接说，但如果你读了其他帖子，你会发现这个问题已经被大量更新和扩展了，当我发布我的答案时，问题并不清楚，但问题后来被扩展和澄清了。我没有删除答案，因为它指出了需要使用JS才能实现所需的效果，如果需要一个仅使用HTML/CSS的解决方案，那么这是最接近不使用JS的解决方案。 - Anthony Cregan
5
对于想要纯HTML/CSS实现的人来说，这是一个很好的解决方案，而且DOM元素足够小，提示框几乎出现在鼠标指针所在的位置。在我的情况下，这些图标可以在悬停时显示比title属性支持的更丰富的内容。+1 - bigdogwillfeed
12

我更喜欢这种技术：

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

（另见此Fiddle）

1
以上代码只要页面没有垂直滚动条就能正常工作，如果有最大高度，这个代码就无法正常工作。使用jQuery样式的普通工具提示。 - Prabha
5px是一种假设 - 我的鼠标指针设置为大尺寸（>32px），我永远无法将指针移出工具提示文本的路径。 - c z
7
4

这可以通过纯html和css来实现。虽然可能不是最好的方法，但我们都有不同的限制。根据您的具体情况，有三种方法可能会很有用。

  1. 第一种方法涉及将一个不可见的表格覆盖在您的链接上，并在每个单元格上设置悬停动作以显示图像。

#imagehover td:hover::after{
  content: "             ";
  white-space: pre;
  background-image: url("http://www.google.com/images/srpr/logo4w.png");
  position: relative;
  left: 5px;
  top: 5px;
  font-size: 20px;
  background-color: transparent;
  background-position: 0px 0px;
  background-size: 60px 20px;
  background-repeat: no-repeat;
  
}


#imagehover table, #imagehover th, #imagehover td {
  border: 0px;
  border-spacing: 0px;
}
<a href="https://www.google.com">
<table id="imagehover" style="width:50px;height:10px;z-index:9999;position:absolute" cellspacing="0">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

</table>
Google</a>

第二种方法依赖于能够提供自己的光标图像。 

#googleLink{

cursor: url(data:application/octet-stream;base64,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),auto;

}
<a href="https://www.google.com" id="googleLink">Google</a>

  1. 虽然普通的标题工具提示技术上不允许图像，但它允许任何Unicode字符，包括块字母和表情符号，这可能适合您的需求。

<a href="https://www.google.com" title="️️" alt="️️">Google</a>

3

在AngularJS中，我们可以使用“指令（Directive）”来实现相同的功能。

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

-1

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

var tooltips = document.querySelectorAll('.hastip');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
.hastip {
    border-bottom: 1px dotted black;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

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

.tooltip {
    position: fixed;
    white-space: nowrap;
    display: none;
    background-color: #ffffcc;
    border: 1px solid black;
    color: #000;
    padding: 5px;
    border-radius: 6px;
    z-index: 1000;
    font-size: 13pt;
    font-weight: initial;
}
Lorem ipsum dolor sit amet, <span class="hastip">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="hastip">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="hastip">laborum<span class="tooltip">This is yet
another tooltip</span></span>.

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接