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

Question

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

这是我尝试使用的代码

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

Answer 1

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

但是工具提示不能有纯图像 html。

以这个片段为例：

<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 工具提示。请在此处查看示例：https://codepen.io/jeprubio/pen/bGdGaam。在这种情况下，您需要一些额外的 javascript 和 css 文件（如您在代码笔的设置中所见）。

更新

您也可以在此处查看 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>

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

Is it possible to use tooltip with an image in map tag?

dictionary

tooltip

area

coordinates