<p>
  これは普通の文章です。ここに
  <span class="tooltip-trigger-css">マウスを乗せてみてね！
    <span class="tooltip-text-css">これがツールチップの内容だよ！HTMLとCSSだけで作れるんだ。</span>
  </span>
  というテキストがあります。
</p>

.tooltip-text-css {
  background-color: #333;  /* 背景は濃いグレー */
  color: #fff;         /* 文字は白 */
  padding: 8px 10px;    /* 内側の余白 */
  border-radius: 6px;   /* 角を少し丸く */
  font-size: 0.9em;     /* 少し小さめの文字 */
  text-align: center;    /* 文字を中央揃え */
  width: 160px;       /* 幅を固定 (例) */
}

.tooltip-trigger-css {
  position: relative;
  display: inline-block; /* position:relativeと一緒に使うことが多い */
}
.tooltip-text-css {
  /* (さっきの基本スタイルに加えて...) */
  position: absolute;
  z-index: 10;            /* 他の要素より手前に表示 */
  bottom: 130%;         /* 親要素の上側に配置 */
  left: 50%;
  margin-left: -80px;      /* 幅(160px)の半分だけ左にずらす */
}

.tooltip-text-css {
  /* (基本スタイルとpositionスタイルに加えて...) */
  visibility: hidden; /* 最初は隠す */
  opacity: 0;      /* 最初は透明 */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* 0.3秒かけてフワッと変化 */
}

.tooltip-trigger-css:hover .tooltip-text-css { /* トリガーにホバーした時、その中のツールチップテキストは... */
  visibility: visible; /* 見えるようにする */
  opacity: 1;      /* 不透明にする */
}

.tooltip-text-css::after { /* ツールチップテキストの後に「何か」を追加 */
  content: "";            /* 疑似要素には必須。中身は空でOK */
  position: absolute;  /* ツールチップテキストを基準に配置 */
  top: 100%;          /* ツールチップ本体の下にくっつける */
  left: 50%;           /* 左右中央 */
  margin-left: -5px;     /* 矢印の幅(10px)の半分だけ左にずらす */
  border-width: 5px;       /* ボーダーの太さを5pxに */
  border-style: solid;
  border-color: #333 transparent transparent transparent; /* 上だけ色を付けて他は透明 = 下向き矢印 */
}

<p>
  このサイトでは <span class="tooltip-trigger-css">HTML
    <span class="tooltip-text-css">HyperText Markup Language の略だよ。ウェブページの骨組みを作るんだ。</span>
  </span> や
  <span class="tooltip-trigger-css">CSS
    <span class="tooltip-text-css">Cascading Style Sheets の略！ウェブページの見た目をデザインするよ。</span>
  </span> を使って、
  <span class="tooltip-trigger-right">クールなツールチップ
    <span class="tooltip-text-right">これは右側に出るツールチップのサンプルだよ！CSSだけでこんなこともできる！</span>
  </span> を作る方法を学ぶよ！
</p>

/* 上側に表示されるツールチップ */
.tooltip-trigger-css {
  position: relative;
  display: inline-block;
  border-bottom: 1px dashed #3498db;
  cursor: help;
}
.tooltip-text-css {
  visibility: hidden;
  opacity: 0;
  width: 160px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.9em;
  line-height: 1.4;
  position: absolute;
  z-index: 10;
  bottom: 130%;
  left: 50%;
  margin-left: -80px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tooltip-text-css::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.tooltip-trigger-css:hover .tooltip-text-css {
  visibility: visible;
  opacity: 1;
}

/* 右側に表示されるツールチップ */
.tooltip-trigger-right {
  position: relative;
  display: inline-block;
  border-bottom: 1px dashed #e67e22;
  cursor: help;
}
.tooltip-text-right {
  visibility: hidden; opacity: 0;
  width: 150px; background-color: #c0392b; color: #fff;
  text-align: center; border-radius: 6px; padding: 8px 10px; font-size: 0.9em; line-height: 1.4;
  position: absolute; z-index: 10;
  top: 50%;
  left: 110%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tooltip-text-right::before {
  content: ""; position: absolute;
  top: 50%; right: 100%;
  margin-top: -5px;
  border-width: 5px; border-style: solid;
  border-color: transparent #c0392b transparent transparent;
}
.tooltip-trigger-right:hover .tooltip-text-right {
  visibility: visible; opacity: 1;
}