マウスオーバーでツールチップを表示させるCSSを作成しましたが表示されません。

マウスオーバーで表示させる疑似クラス「:hover」の記述に原因があるのではと思い、色々書き換えてみましたが改善されませんでした。

ご教示のほどよろしくお願いいたします。

CSS
#tooltip1 {
 position: relative;
}
/*コード１：マウスオーバーでコピーアイコンの背景色が変更*/
#tooltip1:hover {
 background: #20b2aa;
}
/*コード２：ツールチップ情報*/
.tooltip2 {
 display: none;
 position: absolute;
 font-size:9px;
 top: 4.5em;
 right: 0.5em;
 z-index: 9999;
 padding: 0.3em 0.5em;
 color: #FFFFFF;
 background: #c72439;
 border-radius: 0.5em;
}
/*コード３：マウスオーバーでツールチップを表示させる*/
#tooltip1:hover .tooltip2 {
  display: block;
</style>

HTML
<div style = "margin:10px; padding:10px; background-color:#008b8b;">
<form>
	<input id="tooltip1" type="image" src="./copy_paste_icon-icons.com_72426.png" style="width:30px; height:30px; float:right;">
	<div class="tooltip2">コピー</div>
</form>
<pre><code>
.menu_title{
	font-size:30px;
	font-family:AlexBrush-Regular_font;
	color:#173c77;
	margin:0 0 5px 0;
	font-weight:bold;
}
</code></pre>
</div>

試したこと

記載しました＜コード２＞の「display: none;」を「display: block;」に変更するとツールチップが表示されます。

＜コード３＞の疑似クラスの記述を「.tooltip2:hover { 」に変更しても改善しませんでした。

補足情報（FW/ツールのバージョンなど）

環境情報は以下になります。
エディタ：サクラエディタ
ブラウザ：chrome

行動規範の内容に同意します

回答2件

こうすればいいと思います。

HTML
1  <div id="tooltip1">
2    <input type="image" src="./copy_paste_icon-icons.com_72426.png" style="width:30px; height:30px; float:right;">
3    <div class="tooltip2">コピー</div>
4  </div>

投稿2021/08/07 02:38