2017-12-17

コンポーネント私的ベストプラクティス

メジャーなコンポーネントを作成する際の個人的なベストプラクティスに関してメモ。随時追加。

ツールチップ

DEMO

キモとなる箇所

重要な箇所のみ抜粋

<div class="ToolTip">
  <div class="ToolTip_body">テキスト</div>
</div>

.ToolTip {
  width: 300px;
}

.ToolTip_body {
  display: inline-block;

  background: #2c3e50;
  box-shadow: rgba(0, 0, 0, .2) 2px 2px 10px;
}

解説

ツールチップ作る際に面倒なこととして、ツールチップの幅指定が挙げられる。

position: absoluteな要素は親要素の幅を基準として幅計算されるため、テキストの長さに応じて自動的に幅調整させることが出来ない。

実際、Backlog のツールチップの指定を見たところ直接widthの値を指定していた。

その解決策が上記のスタイル指定。.ToolTipでwidthを指定しているが、このwidthはツールチップの最大幅となる。

実際に長いテキストと短いテキストのパターンを見てみると、短いテキストの時は自動的にツールチップ自体も小さく、長いテキストの際は指定された最大幅で描画されているのがわかる。

問題点

これ系の難点として、親要素のoverflow: hiddenに非常に弱い点がある。

解決策としては、JavaScript を使用してbody直下にツールチップを生成するようにしてしまえば解決する。ちなみにその際は今回のような実装しなくてもツールチップは勝手に伸縮する。

結論としては、より汎用性を高めたいのであれば JavaScript を記述してbody直下に生成。そこそこの汎用性があれば OK だったり、JavaScript を記述出来ない事情があるのであれば今回の方法なのかなと思う。