CSS3：CSSだけでツールチップ

サンプルはこちら。

See the Pen CSS only Tooltip by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

リンクにマウスオンでツールチップが出ます。

CSS(Sass)

[class*=tooltip_] {
  position: relative;
  &:before, &:after {
    display: none;
    content: "";
    position: absolute;
    z-index: 1;
  }
  &:before {
    //表示定義のみなので省略
  }
  &:after {
    //表示定義のみなので省略
  }
  &:hover {
    &:before {
      display: block;
    }
    &:after {
      display: block;
    }
  }
}

.tooltip_01:after {
  content: "ツールチップの説明";
}
.tooltip_02:after {
  content: "リンクの説明";
}
.tooltip_03:after {
  content: "リンクテキストの説明";
}

「:before」と「:after」の擬似要素でツールチップを作り、リンクのhover時のみに表示させることでツールチップを表現しています。

またツールチップ内のテキストはクラス別に content を定義して設定しています。
JSならばまた別の方法でHTML側だけで対応もできますが、CSSのみの場合はテキストごとにクラスを別に作る必要があり、そこばかりはCSSの限界と言えます。「CSSでも出来ないこともない」ってレベルで、汎用性考えるとJSで作ってしまった方が良いと思いますので参考までに。