iOSでのツールチップの表示

Question

前提・実現したいこと

ツールチップをiOSでも表示したい

発生している問題・エラーメッセージ

PCでは表示されますが、iOSで表示されない
該当URL https://mogumiru.com/check

該当のソースコード

#sample1 li {
  position:relative;
}
#sample1 li:hover {
  background: #deb3ba;
}
.sample1-tooltips {
  display: none;
  position: absolute;
  bottom: -2.8em;
  left: 0.3em;
  z-index: 9999;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  background: #c72439;
  border-radius: 0.5em;
}
.sample1-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;g
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}
#sample1 li:hover .sample1-tooltips {
  display: block;
}

試したこと

https://unguis.cre8or.jp/web/1934
こちらのサイトのCSSで実装で、iOSでも表示されていたため、そのまま導入しました

Answer 1

iOSのブラウザで:hoverは使用できないです。

こちらのサイトで使用できるのは
JavaScriptも使用されているからです。
https://unguis.cre8or.jp/web/1934

Comments

[you0923]

ありがとうございます。解決しました。

Answer 2

.sample1-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;g  // ここ
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}

g が入っているのが原因かもしれません。

Comments

[you0923]

すいません、gは私の打ち間違いなだけです。実際のサイトにはきちんとコードを入れています。