时间戳

首页 > 解决方案 > 适用于 iPad 的 SVG 照片的工具提示

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

问题描述

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

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

有没有办法将两者联系在一起，创建显示在 iPad 上的工具提示？我花了过去两天在互联网上搜索线索，但似乎没有人知道这一点（我可以看到）。

标签： csssvgtooltip

解决方案

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

但是我没有 iPad，所以我不能保证它是否可以在一个 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>

推荐阅读