ヘルプチップの実装手順

こういうものを作るときの話です。

最初から CSS でモーダルを消すと、表示の確認と切り替えの動作が面倒になります。
そのため、このような実装には以下の手順を踏むようにします。

1. ヘルプチップを HTML, CSS で作成
2. HTML, CSS でモーダルを作成
3. 閉じるボタンの動作を JS で実装
4. ヘルプボタンの動作を JS で実装
5. CSS でモーダルを display: none にする

ヘルプチップに限らず、アクションによって表示・非表示が切り替わるようなものは最初に JavaScript で切り替えの実装をするのではなく、最初に表示させるコンテンツを作っておこうと思います。