Question

我试图使用tipsy

...向页面添加工具提示。所以我准备了下面发布的简单HTML示例 - tipsy似乎运行，但不幸的是，当我鼠标悬停元素时，整个文档正文被推下来，这在视觉上非常恼人（另外，可以使焦点下的元素移动并丢失鼠标悬停）;这可以在下面的gif上看到，在Ubuntu 14.04，Firefox 43上捕获：

我怎样才能防止这种情况＆＃34;推动＆＃34;在tipsy元素上执行鼠标悬停时，整个文档是什么？

测试代码：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="pragma" content="no-cache"/>
  <meta http-equiv="x-ua-compatible" content="IE=edge"/>
  <script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
  <script type="text/javascript" src="../jquery.tipsy.js"></script>
  <link rel="stylesheet" type="text/css" href="../tipsy.css"/>
  <style type="text/css">
#_help_refresh {
  display:none;
}
  </style>
  <script type="text/javascript">
ondocready = function() {
  // placeholder - nothing for now...
  $("#_refresh").tipsy({fade: true, gravity: 's', html: true, title: function() {
      return $("#_help_refresh").html();
    }
  });
}
$(document).ready(ondocready);
  </script>
</head>

<body>
  <h1>Testing tipsy ...</h1>

  <div id="testholder">
    <div>Some text here:</div>
    <div>Some more text here:</div>
  </div>

  <span><img id="_refresh" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAQxJREFUOI2l1DtOA0EMBuBPiGMgUBo4AQWioEAkCCpuACUSuQLcgYI+4QJ0NAREkWOkiBBCPBraFLsU6w3L7uZFfsmSx2P/Y8/YQz1a6GKAUcggbAc1/pdlwxb6SGfIEzYi5gpJkWQP3+GYoIc2miFtPMdeinfcFNbjTHKSYZBOwhE+arKkUM4Qa1NIclzXEbUK5UzLJEd+JxWibii9JUjSVeyG090MkjOcysqvxShYm3NkNBErywSXiV5C31yWqB/6yT/iO7IuP2fx589xHDEJdnLjog3ZwFvE3Bc3FhmRfbyG7yfWyw7loX3Ahb9D++i3Ib+wPem0eb6RRHbBjSlZj3GIW9WPrROlVfADiJ5vX7sneXIAAAAASUVORK5CYII="/></span>

  <span id="_help_refresh">Here is the help test that goes in the tooltip</span>
</body>

Answer 1

通过Firebug和Firebug: How to inspect elements changing with mouse movements?来确定问题所在。

基本上，当页面加载时，<h1>是<body>中的第一个元素。 Firebug显示在这种情况下<h1>的系统CSS是：

margin-block-end: 0.67em; margin-block-start: 0.67em;

请注意，在这种情况下 - 首先<h1>时，Firefox会自动禁用margin-block-start;但是当其他元素出现在<h1>之前时，Firefox会自动启用margin-block-start。

所以，会发生什么：开始时我们有<body><h1>...，然后发生鼠标悬停，tipsy实际上插入<div>作为<body>的第一个孩子，并且因此我们有<body><div ... /><h1>...;因此，<h1>不再是第一个孩子了，所以它的margin-block-start被启用了，所以这个＆＃34;下推＆＃34;内容变得可见。

最简单的修复 - 没有CSS或JS或任何东西 - 只是插入一个空的<div>（或其他元素）作为<body>的第一个孩子，即<h1>的前面1}}：

...
<body>
  <div></div>
  <h1>Testing tipsy ...</h1>
...

然后，由于<h1>不再是第一个孩子，因此从一开始就会启用margin-block-start，因此tipsy鼠标悬停在相应的div后不会更改插入了。

Answer 2

问题不在于您的HTML。这是插件。我运行代码并注意到该插件将工具提示附加到文档的顶部。这会导致新添加的DOM元素占据顶部的一些空间，从而导致其下方的每个其他元素向下移动几个像素：在tipsy.js的第34行查看此代码：

$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);

因此，当您使用prependTo()，

替换该行的appendTo()方法时

$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);

tipsy在文档末尾添加了工具提示，防止在文档顶部添加新的DOM元素。所以编辑源代码。

修改

如果您修复了特定问题，如果您要在设计的其他位置调用插件，则可以帮助修改源代码。我相信在您调用插件的代码的其他位置可能会出现问题，因为插件会在DOM树的顶部添加新元素。使插件在文档的末尾添加这些元素应该限制您遇到的错误类型。

防止jQuery提示在元素鼠标悬停上推送文档顶部？

2 个答案: