Tooltip with CSS

ツールチップをJavaScriptを使わず実現したい。

最初はPopper.jsを使おうと思ったけど（bootstrap5で依存しているツールチップ・ライブラリ）、HTML/CSSだけで実現することにした。

HTMLとCSSだけで作るツールチップ

/* カーソルを重ねる要素 */
.tooltip {
  position: relative; /* ツールチップの位置の基準に */
  cursor: pointer; /* カーソルを当てたときにポインターに */
}

/* ツールチップのテキスト */
.tooltip-text {
  opacity: 0; /* はじめは隠しておく */
  visibility: hidden; /* はじめは隠しておく */
  position: absolute; /* 絶対配置 */
  left: 50%; /* 親に対して中央配置 */
  transform: translateX(-50%); /* 親に対して中央配置 */
  bottom: -30px; /* 親要素下からの位置 */
  display: inline-block;
  padding: 5px; /* 余白 */
  white-space: nowrap; /* テキストを折り返さない */
  font-size: 0.8rem; /* フォントサイズ */
  line-height: 1.3; /* 行間 */
  background: #333; /* 背景色 */
  color: #fff; /* 文字色 */
  border-radius: 3px; /* 角丸 */
  transition: 0.3s ease-in; /* アニメーション */
}

/* ホバー時にツールチップの非表示を解除 */
.tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}

/* 吹き出しデザイン */
.tooltip-text:before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-bottom: 7px solid #333;
}

<button class="tooltip">
  <span class="tooltip-text">ツールチップの内容</span>
  ボタンテキスト
</button>

JavaScript クラス

JavaScript のクラス記法もだいぶ充実して書きやすくなっている。

クラス - JavaScript | MDN

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // ゲッター
  get area() {
    return this.calcArea();
  }
  // メソッド
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

ジェネレータメソッド

* でジェネレータ関数を作る。

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for(const side of this.sides){
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

静的メソッドとプロパティ

staticキーワードを使う。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

プライベートフィールド

# を使うと良い。

class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {
    this.#height = height;
    this.#width = width;
  }
}