如何在 javascript 的图像路径上修复工具提示 "text on hover"

Question

我是 javascript 的新手，在将 .js 文件链接到 .html 文件时遇到问题。它在 codepen 中工作正常，但是当我在 visual code studio 中实现它时，悬停时的文本不显示。我将 .js 文件与通用语法“https://codepen.io/przemoo83/pen/vJPvmy Ps：我想使用 javascript 作为工具提示 "text on hover"，这样我以后就可以通过通道更新该数据。您认为这是个好主意，还是我可以只使用 css 并且以后仍然可以更新它？还是我需要使用 php，因为数据来自服务器？谢谢大家

Answer 1

看来您可能只是没有在本地 HTML 文件中包含所有正确的导入，或者可能将它们放在错误的顺序或文件中的错误位置。

我设置如下，如果你用这个应该没问题。只需确保您拥有 HTML 中提到的所有外部资源，这意味着 CSS 的 bootstrap.min.css，以及 jquery.min.js 和 bootstrap.min.js 的顺序。 Bootstrap 需要先加载 jQuery 才能加载到运行。然后你自己的链接或嵌入的 JS 应该是第三个，因为这是引用两者。

如果您查看浏览器的 Developer window（按 F12 获得 Chrome），它会显示任何错误消息，帮助您解决问题。

$(document).ready(function(){
  $('.path').tooltip({container:'.img-container'});
});

.img-container {
  width: 50%;
    margin: 0 auto;
}
path {
  fill: transparent;
  transition: 1s;
  stroke: transparent;
  stroke-width: 2px;
  opacity: 1;
}
#screen:hover {
  fill: red;
}
#one:hover {
  stroke: green;
}
#two:hover {
  fill: blue;
  stroke: yellow
}
#three:hover {
  fill: grey;
  opacity: 0.5
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>z</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
  <link rel='stylesheet' href="/mysite/static/.other/z.css">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
  <script src='/mysite/static/.other/z.js'></script>
</head>

<body>

  <div class="img-container">
    <svg viewBox="0 0 960 714" height="100%" width="100%" version="1.1" id="svg4160">
      <image width="960" height="714" preserveAspectRatio="none" xlink:href="http://i68.tinypic.com/apa4x0.png" id="" />
      <path class="path" id="screen" data-placement="top" title="Screen!" d="m 303.80326,47.378347 263.07451,144.628633 0.41559,3.3248 -187.85098,154.18743 -6.6496,1.6624 -265.5681,-174.96741 z" />
      <path id="one" class="path" data-placement="top" title="One!" d="m 511.81083,476.48487 32.00116,22.44237 10.80559,7.68859 4.57159,1.039 2.078,-1.4546 67.11933,-60.05413 1.039,-2.4936 -16.00059,-12.26018 -27.01397,-16.41619 -2.07799,-1.24679 -1.2468,0.4156 -22.85798,19.74097 -47.79394,39.48196 z" />
      <path class="path" id="two" data-toggle="tooltip" data-placement="top" title="Two!" d="m 589.52794,411.23574 29.09197,17.66298 13.50698,11.01339 3.3248,0 77.71711,-78.34052 -1.039,-2.70139 -14.54598,-9.76659 -25.14377,-14.54599 -4.3638,-1.45459 -2.70139,2.07799 -76.67812,73.56112 1.4546,2.2858 z" />
      <path class="path" id="three" data-placement="top" title="Three!" d="m 670.77765,331.23283 29.50757,15.37718 13.09138,9.97439 4.5716,0.4156 47.58614,-53.61234 0.8312,-3.117 -13.71478,-8.10419 -30.54657,-16.41618 -1.4546,0.8312 -48.41734,51.74214 z" />
    </svg>
  </div>

</body>
</html>

如何在 javascript 的图像路径上修复工具提示 "text on hover"

How to fix tooltip "text on hover" over paths of images with javascript

html

javascript

css

tooltip