HTMLの擬似要素をホバーしてツールチップを表示したい

Question

擬似要素をツールチップとして表示はできるのですが、
擬似要素をホバーして、ツールチップを表示することはできるのでしょうか？

今模索しているソースはこんな感じです。。。

<div>
  <span>たいとる</span>
  <span id="disp-tip">・開始年月日、または終了年月日のどちらか必須です。</span>
</div>

/* 擬似要素でアイコンを表示 */
div span:nth-child(1):after {
    content: '';
    background-image: url(/img/test.png);
    background-repeat: no-repeat;
    background-size: 22px;
    maxWidth: 450;
    width: 35px;
    height: 22px;
    display:inline-block;
}
/* ツールチップ部非表示 */
span#disp-tip {
    display: none;
}
/* 擬似要素ホバーでツーチップ表示 */
div span:nth-child(1):hover:after ~ span#disp-tip {
  display: block;
}

Answer 1

こののHTMLだと1箇所しか使えないですが、大丈夫でしょうか？
また、今回の仕様だと、:afterのhoverで表示させることは難しいと思います。

疑似要素は特殊なものなので、「#disp-tipが後ろにある」とは言えません。
そのため、隣接セレクタなどが使用できません。
（実際のHTMLのソースコード上で、後ろにある・隣にある状態ならセレクタが効きます）
（:afterをhoverして色を変えたい、などなら可能です）

そのため、一番簡単で素直なやり方はspan:hoverにすることです。

～略～

/* ホバーでツーチップ表示。次の要素なので隣接セレクタ+使用。~でもいけると思います */
div span:nth-child(1):hover + #disp-tip {
  display: block;
}

複数回使いたい・:afterで実装したいなら、
他の方法（classにしたりjQueryを使ったり）になります。

解決できれば幸いです。

Answer 2

例えば，.abc::afterにhoverしても，実際には.abcにhoverされたものとして扱われます．
これは仕様です

妥協案の例：

<div class="tt" data-desc="・開始年月日、または終了年月日のどちらか必須です。">たいとる</div>

.tt{
  position: relative;
  display: inline-block;
  background: azure url(https://placehold.jp/22x22.png) right no-repeat;
  line-height: 22px;
  padding-right: 25px;
}
.tt:hover::after{
  content: attr(data-desc);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  max-width: 90vw;
  background: #fff;
  border: 1px solid;
}

data-属性とcontent: attr();を利用して，使い回しが効くようにしてるところと，::afterで表示させていた画像を，仕様を考慮し，背景画像にしたところが，ポイントです

ちなみに，:afterではなく，::afterです

Answer 3

疑似要素にhoverは指定できません。