【WordPress】CSSのみの画像つきツールチップのサンプル（改）

<span class="m_tooltip">
 沈月<img src="https://meian-blog.net/main/tooltip/沈月.webp" alt="画像の説明" />
<span class="m_tooltip-content" aria-hidden="true">
1997年2月27日生まれ<br>主な出演作：ドラマ『致我们单纯的小美好』『流星花园2018』『我的反派男友』など。（以下配信待ち）『月刊少女』
  </span>
</span>

/*画像付きツールチップ*/
.m_tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.m_tooltip:hover::before {
  content: "";
  position: absolute;
  top: calc(100% + 5px); /* 三角タブの分だけ下にずらす */
  left: 150px; /* 画像の最大幅 */
  width: 450px; /* テキスト領域の横幅を指定 */
  height: 150px; /* テキスト領域の縦幅を指定 */
  padding-left: 10px; /* 左側の余白 */
  line-height: 2;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0 5px 5px 0; /* 右下と右下を5px丸める */
  color: white; /* 文字色 */
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 100;
}

.m_tooltip:hover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 5px); /* 三角タブを中央に配置 */
  border-width: 0 5px 5px 5px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}

.m_tooltip img {
  display: none;
}

.m_tooltip:hover img {
  border-radius: 5px 0 0 5px; /* 左上と左上を5px丸める */
  display: block;
  position: absolute;
  top: calc(100% + 5px); /* 三角タブの分だけ下にずらす */
  left: 0;
  max-width: 150px;
  z-index: 100;
}

.m_tooltip-content {
  width: 460px; /* テキスト領域の横幅を指定 */
  height: 150px; /* テキスト領域の縦幅を指定 */
  display: none;
  position: absolute;
  top: calc(100% + 5px); /* 三角タブの分だけ下にずらす */
  left: 150px; /* 画像の最大幅 */
  /* ツールチップのスタイリング */
  background-color: rgba(0, 0, 0, 1);
  color: yellow;
  border-radius: 5px;
}

.m_tooltip:hover .m_tooltip-content {
  display: block;
}

/* 追加: ツールチップテキストのスタイリング */
.m_tooltip .m_tooltip-content {
  display: none;
  position: absolute;
  top: calc(100% + 5px); /* 三角タブの分だけ下にずらす */
  left: 150px; /* 画像の最大幅 */
  width: 450px; /* テキスト領域の横幅を指定 */
  height: 150px; /* テキスト領域の縦幅を指定 */
  padding-left: 10px; /* 左側の余白 */
  line-height: 1.5;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0 5px 5px 0; /* 右下と右下を5px丸める */
  color: white;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 100;
}