是否可以在地图标签中使用带有图像的工具提示？答案

【问题标题】：Is it possible to use tooltip with an image in map tag?是否可以在地图标签中使用带有图像的工具提示？
【发布时间】：2020-05-22 14:59:32
【问题描述】：

我只是想知道是否可以在区域标签内使用带有图像的工具提示。我发现用图片弹出有关特定位置的简短信息更容易和更轻松的方式。带有图像的工具提示工作得很好，但是当我将它与坐标一起使用时，它将是一个文本。

这是我尝试使用的代码

        <a data-toggle="tooltip" title="The Ampitheater<img src='images/wizard-v2-bg.jpg'/>">
            <area shape="circle" coords="636,604,81" href="#">
        </a>
    </div>

【问题讨论】：

标签： dictionary tooltip coordinates area

【解决方案1】：

可以为每个区域设置标题。

但工具提示不能有纯 html 格式的图像。

以这个 sn-p 为例：

<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" title="sun">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" title="mercury">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"  title="venus">
</map>

如果您仍然希望他们拥有图像，您可以使用 Jquery Tooltips 等一些库来实现。在此处查看示例：https://codepen.io/jeprubio/pen/bGdGaam。在这种情况下，您需要一些额外的 javascript 和 css 文件（您可以在 codepen 的设置中看到）。

更新

您也可以在此处查看 codepen 示例，其中所有代码都在一个 html 中：

<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https:////maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
img {
  margin: 10px;
}
.ui-tooltip {
    max-width: 350px;
}
</style>
</head>
<body>
  <img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

  <map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" title="sun <img src='https://image.shutterstock.com/image-vector/sun-icon-jpg-260nw-416254921.jpg' height='100'>">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" title="mercury <img src='https://solarsystem.nasa.gov/system/stellar_items/image_files/2_feature_1600x900_mercury.jpg' height='100'>">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"  title="venus <img src='https://cdn.mos.cms.futurecdn.net/dzxtQ2dXH9SVKztJTbAXSA-320-80.jpg' height='100'>">
  </map>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
  
  <script>
    $( function() {
    $( document ).tooltip({
      items: "[title]",
      content: function() {
        var element = $( this );
        if ( element.is( "[title]" ) ) {
          return element.attr( "title" );
        }
      }
    });
    });
  </script>
</body>
</html>

【讨论】：

感谢您的参考，但是，当我尝试将您的代码复制并粘贴到我的计算机上时，它仍然是文本格式。
什么意思？哪一个？您需要添加所有 javascripts 和 css 代码（您在窗格中看到的那些以及您可以在设置中看到的文件）的 codepen。
我做到了。我需要插入链接吗？
一定少了一些东西，我已经添加了一个更新，以 codepen 的示例作为 html 代码 sn-p。里面有所有的css和javascript。
天哪，它现在开始工作了！非常感谢您的帮助！