HTMLとSCSSでツールチップを作りましょう。 今回作るのは、ハテナマークにホバーをすると説明文が飛び出てくるタイプです。 自己紹介 アプリクリエイターの 猫チーズ です。HTMLとCSS歴は8年になります。 先月デザイン系の大学を卒業し、4月からサイバーブレイン株式会社( メインサービスはAI Academy )でデザイナーを始めました。 今回の前提条件 JavaScriptは使いません。 スタイルシートはSCSS(CSSを拡張した言語)で書いています。SCSSとして使っているのはセレクターのネストのみです。 もくじ 初期状態の確認 マルを書く マルにハテナを入れる 説明文を置く ホバーで表示/非表示を切り替える 吹き出しをフェードイン/アウトさせる 吹き出しの飛び出してる部分をつける 吹き出しの見た目を整える 吹き出しへのホバーを無視する テーマカラーをCSS変数に置き換える 先に完