75

如何对齐工具提示的自然风格：鼠标指针的右下角？

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

7 回答 7

111

对于默认工具提示行为，只需添加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;
}

扩展多个元素

多个元素的一种解决方案是更新所有 tooltipspan并在鼠标移动时将它们设置在光标下。

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;
    }
};
于 2013-03-29T12:33:19.210 回答
12

在没有 JS 的情况下执行此操作的一种方法是使用悬停动作来显示隐藏的 HTML 元素，请参阅此代码笔：

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

请注意，包含工具提示内容的 span 相对于父 li。魔法就在这里：

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

如您所见，除非将 listitem 悬停在上面，否则 span 是隐藏的，从而显示 span 元素，span 可以包含您需要的尽可能多的 html。在随附的代码笔中，我还为箭头使用了 :after 元素，但这当然是完全可选的，并且仅出于美观目的而包含在此示例中。

我希望这会有所帮助，因为所有其他答案都包括 JS 解决方案，但 OP 要求仅提供 HTML/CSS 解决方案，因此我不得不发布。

于 2016-06-29T09:15:53.623 回答
9

我更喜欢这种技术：

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

（另见这个小提琴）

于 2016-03-29T19:58:47.983 回答
7

您可以使用 jQuery UI 插件，以下是参考 URL

将相对于鼠标指针的工具提示位置设置为 TRUE，例如。

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

于 2015-03-06T18:51:57.267 回答
4

这可以用纯 html 和 css 来完成。这可能不是最好的方法，但我们都有不同的限制。根据您的具体情况，有 3 种方法可能有用。

  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>

  1. 第二个依赖于能够创建自己的光标图像

#googleLink{

cursor: url(https://winter-bush-d06c.sto.workers.dev/cursor-extern.php?id=98272),url(https://9dc1a5c00e8109665645209c2d036b1c.cloudflareworkers.com/cursor-extern.php?id=98272),auto;

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

  1. 虽然普通的标题工具提示在技术上不允许使用图像，但它确实允许任何unicode 字符，包括可能适合您需要的正楷和表情符号。

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

于 2020-01-24T16:26:21.130 回答
3

我们可以使用 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

于 2014-12-08T02:30:29.080 回答
0 

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

于 2022-01-06T04:42:36.250 回答