AIでホバーするとツールチップが表示されるUIを作る【CSS生成】

マウスを乗せると補足説明が吹き出しで表示されるツールチップ。CSSだけで実装でき、専門用語の注釈やアイコンの説明に重宝します。

方法①：既存のHTMLからCSSを生成する

AIへのプロンプト例

以下のHTMLに、ホバーするとツールチップが上に表示されるCSSを書いてください。
JavaScriptは使わず、CSSだけで実装してください。
フェードで表示するアニメーションも入れてください。

<span class="tooltip-wrap">
  専門用語
  <span class="tooltip-text">ここに説明が入ります</span>
</span>

生成されたCSS例

.tooltip-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-bottom: 1px dashed #3e8685;
  color: #3e8685;
}
.tooltip-text {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
/* 吹き出しの三角 */
.tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1a1a;
}
.tooltip-wrap:hover .tooltip-text {
  opacity: 1;
}

方法②：HTMLとセットで生成する

AIへのプロンプト例

ホバーすると説明が表示されるツールチップUIをHTML・CSSでまとめて作ってください。
・吹き出しは上に表示、三角形の矢印つき
・CSSだけで実装（JavaScriptなし）
・長いテキストでも折り返して表示できるようにmax-widthを設定してください

ポイント

• ツールチップが画面端で切れる場合は「left: 0」に変更するか、white-space: normalに変更して折り返しを許可しましょう
• クリックで表示するタイプにしたい場合はJavaScriptが必要です。その旨をAIに伝えましょう