适用于 iPad 的 SVG 照片的工具提示

Question

我在 https://bullittcountyhistory.org/1974centennial/crowdview.html 的页面上有一张 svg 照片，它使用工具提示的标题代码在悬停在它上面时识别每个人的脸。除了在 iPad.

这样的移动设备上，它工作正常

我还在 https://www.w3schools.com/css/css_tooltip.asp css 工具提示代码中找到了适用于 iPad 以及我的计算机的代码。

有没有什么方法可以将两者联系在一起，创建显示在 iPad 上的工具提示？这两天我一直在网上搜索线索，但似乎没有人弄明白这一点（我能看到）。

Answer 1

你基本上会做同样的事情，除了你会使用 SVG 元素，而不是 HTML 个。

但是我没有iPad，所以我不能保证它是否适用于一个。

.tooltiptext {
  visibility: hidden;
  font-size: 16pt;
}

.tooltiptext text {
  fill: #fff;
}

.tooltiptext rect {
  fill: black;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<svg>

  <g class="tooltip">
    <circle cx="150" cy="75" r="75" fill="red"/>

    <g class="tooltiptext">
      <rect x="90" y="62" width="120" height="1.4em" rx="6"/>
      <text x="150" y="75" dy="0.4em" text-anchor="middle">Tooltip text</text>
    </g>
  </g>
  
</svg>

适用于 iPad 的 SVG 照片的工具提示

Tooltips for a SVG photo that work on an iPad

css

svg

tooltip