【React✖️css】ホバーを作りたい

研修中の開発備忘録です！

はじめに！

const AchievementImageIcon: React.FC<ImageIconProps> = ({ index, brightness, text, hoverText }) => {
  if (index < -1 || index >= images.length) {
    return null; // インデックスが範囲外の場合は何も表示しない
  }
  const image = images[index];
  // 明度を調整するスタイルを動的に生成する
  const brightnessStyle = {
    "--brightness": `${brightness}%`, // カスタムプロパティに明度を設定
  } as React.CSSProperties;

  return (
    <div className="achievement_icons">
      <img
        src={image.default}
        alt={`image-${index}`}
        className="achievement_icon"
        style={brightnessStyle} // 明度を調整するスタイルを適用
      />
      <p>{text}</p>
      <div className="tooltip">{hoverText}で獲得ピヨ！</div>
    </div>
  );
};

• 呼び出し元

今回のメイン

:root {
  --brightness: 100%;
}

.achievement_icon {
  filter: brightness(var(--brightness)); /* --brightness変数を使用して明度を調整 */
}

.achievement_icons {
  position: relative; /*親要素にrelative*/
}

.col-custom {
  width: calc(100%);
  float: left;
}

.achievement_icons {
  position: relative; /* ツールチップを相対位置に配置 */
  display: inline-block; /* 必要に応じてインラインブロック */
}

.achievement_icon {
  transition: transform 0.1s; /* ホバー時のアニメーション */
}

.achievement_icons:hover .tooltip {
  visibility: visible; /* ホバー時にツールチップを表示 */
  opacity: 1;
}

.tooltip {
  visibility: hidden; /* デフォルトは非表示 */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: left; /* 横方向の中央揃え */
  background-color: #252525bd;
  color: #ffffff;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 70%; /* ツールチップの位置 */
  left: 70%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  height: 100px; /* 縦幅を設定 */
  width: 200px; /* ツールチップの幅 */
  font-size: 20px; /* 文字サイズの設定 */
  font-weight: bold; /* 太字 */
  opacity: 0; /* 初期状態は完全に透明 */
}

・　画像の読み込み

・achievement_iconsの相対位置とインラインブロック表示を利用してツールチップを配置する

・ツールチップは、アイコンにホバーすると表示され、位置やサイズ、フォントが設定されている