Блог

У меня есть svg-фотография на странице по адресу https://bullittcountyhistory.org/1974centennial/crowdview.html это использует код заголовка для всплывающей подсказки, чтобы идентифицировать лицо каждого человека при наведении на него курсора мыши. Это работает нормально, за исключением мобильных устройств, таких как iPad.

Я также нашел на https://www.w3schools.com/css/css_tooltip.asp код всплывающей подсказки css, который работает как на iPad, так и на моем компьютере.

Есть ли какой-либо способ связать их вместе, создав всплывающие подсказки, которые отображаются на iPad? Я провел последние два дня в поисках подсказок в Интернете, но, похоже, никто этого не понял (насколько я вижу).

Вы бы в основном сделали то же самое, за исключением того, что вы использовали бы элементы 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>