はじめに
こんにちは！作って学ぶWeb制作の初級編をご覧いただきありがとうございます。
今回はホバーしたときに表示されるツールチップをHTML・CSS・JavaScriptで実装していきます。
ツールチップは特定の要素にカーソルを合わせたりクリックした時に表示される小さなウィンドウのことをいいます。ユーザーに対して補足情報や伝えるためのに使用されます。
小さくても非常に大切な役割を持つので、表示されるタイミングや位置なども考えながら実装していきましょう。
では今回作るもののデモと仕様を確認していきます。
デモ
それぞれのアイコンをマウスホバーするとツールチップが表示されます。
※スマホの場合はクリック(タップ)で表示されます。
仕様
今回は以下の仕様をもとに実装を進めていきます。
アイコンをホバーしたときにアイコンの右斜め下にツールチップを表示する
PCの場合はホバー、スマホの場合はクリック(タップ)での表示・非表示を可能にする
アイコンはFontAwesomeを使用する
css、jsファイルは外部ファイルとしてhtmlで読み込みます。
【実践】ツールチップを実装する
HTMLを準備する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>ツールチップ</title> <!-- fontawesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- start main contents --> <main> <h1>作って学ぶWeb制作 初級 ツールチップを作ってみよう！</h1> <ul class="icon_list"> <li> <i class="fa-solid fa-user fa-3x icon icon_js"></i> <div class="tooltip"> <div class="tip_message">会員情報</div> </div> </li> <li> <i class="fa-solid fa-cart-shopping fa-3x icon icon_js"></i> <div class="tooltip"> <div class="tip_message">カート</div> </div> </li> </ul> </main> <!-- end main contents--> </body> </html>
ソースコード ポイント解説
各アイコンはfontawesomeを使用するので、８行目でfontawesomeをCDNで読み込んでいます。
class=”tooltip”の要素がホバーしたときに表示されるツールチップになります。
<div class="tooltip">
<div class="tip_message">会員情報</div>
</div>
つづいて、cssのコードを見ていきましょう！
CSSでスタイルを追加する
h1 {
font-family: "Arial", sans-serif;
}
ul li {
list-style: none;
}
.icon_list {
/* 横並びにする */
display: flex;
justify-content: space-between;
width: 220px;
margin-top: 40px;
}
.icon_list li {
cursor: pointer;
}
.icon_list li .icon {
color: #31a967
}
.icon_list li .tooltip {
position: relative;
/* 表示位置 */
left: 30px;
/* 非表示にしておく */
display: none;
width: 100%;
text-align: center;
}
.icon_list li .tooltip .tip_message {
width: 100%;
min-width: 80px;
box-sizing: border-box;
position: absolute;
margin-top: 4px;
border-radius: 3px;
background-color: #d8d8d8;
font-size: 14px;
line-height: 1.2;
padding: 6px;
}
.icon_list li .tip_active {
display: block;
}
ソースコード ポイント解説
.icon_list li .tooltip {
position: relative;
/* 表示位置 */
left: 30px;
/* 非表示にしておく */
display: none;
width: 100%;
text-align: center;
}
マウスホバーされたときに非表示になっているツールチップを表示させるためのクラスを作成します。
.icon_list li .tip_active {
display: block;
}
Javascriptでホバー時にツールチップを表示させる
const icons = document.querySelectorAll(".icon_js")
icons.forEach((icon) => {
// マウスオーバーで表示する
icon.addEventListener("mouseover", function () {
const targetIcon = this
const activeTooltip = targetIcon.nextElementSibling
activeTooltip.classList.add("tip_active")
});
// マウスが外れたら非表示にする
icon.addEventListener("mouseout", function () {
const targetIcon = this
const activeTooltip = targetIcon.nextElementSibling
activeTooltip.classList.remove("tip_active")
});
});
ソースコード ポイント解説
そして、アイコンにマウスホバーした時とアイコンからマウスが外れた時でそれぞれ
mouseover … カーソルが要素の上に乗ったときに処理
mouseleave … カーソルが要素の上から離れたときに処理
まとめ
今回は作って学ぶWeb制作の初級としてツールチップを実装してみました。
比較的簡単なコードで実装できましたが、いかがでしたか？
ツールチップは通常時は非表示になっているのでデザインをスッキリさせつつ、ユーザーに補足情報を伝えられます。
小さいながらも重要な役割があるので、必要な場面でぜひ活用してみてください！
最後までお読みいただきありがとうございました。
