- 2023.01.12
- JavaScript
- GIV_wataru
javascriptでツールチップを作成する方法
ツールチップとは下記の画像のように、マウスカーソルを乗せると表示される吹き出しのようなものです。これがあれば分かりにくい情報を伝えやすくなります。
今回はこのツールチップをjavascriptで作成する方法を解説します。
ツールチップを作成するためのコード
ツールチップを作成するコードは次のとおりです。
▢HTML
<ul class="sns_list"> <li> <i class="fa-brands fa-twitter fa-3x twitter_btn sns_btn_js"> </i> <div class="tooltip"> <div class="tooltip_message">twitterで共有する</div> <div class="tooltip_triangle"></div> </div> </li> <li> <i class="fa-brands fa-facebook fa-3x facebook_btn sns_btn_js"> </i> <div class="tooltip"> <div class="tooltip_message">facebookで共有する</div> <div class="tooltip_triangle"></div> </div> </li> <li> <i class="fa-brands fa-instagram fa-3x instagram_btn sns_btn_js"> </i> <div class="tooltip"> <div class="tooltip_message">instagramで共有する</div> <div class="tooltip_triangle"></div> </div> </li> </ul>
▢CSS
.sns_list { display: flex; justify-content: space-between; width: 170px; margin: 0 auto; margin-top: 40px; } .sns_list li { cursor: pointer; } .sns_list li .twitter_btn { color: #00acee; } .sns_list li .facebook_btn { position: relative; color: #3b5998; } .sns_list li .tooltip { width: 100%; position: relative; display : none; } .sns_list li .tooltip .tooltip_message { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; box-sizing: border-box; position: absolute; margin-top: 16px; background-color: #000000; color: #ffffff; font-size: 12px; line-height: 1.5; padding: 10px; } .sns_list li .tooltip .tooltip_triangle { content: ""; position: absolute; top: -9px; left: 9px; border: 15px solid transparent; border-bottom: 15px solid #000000; } .sns_list li .tooltip_active { visibility: visible; opacity: 1; } .sns_list li .instagram_btn { position: relative; color: #DC2E74; } .sns_list li .instagram_btn .instagram_btn_message { position: absolute; }
▢javascript
const snsBtns = document.querySelectorAll(".sns_btn_js") snsBtns.forEach((snsBtn) => { snsBtn.addEventListener("mouseover", function () { const clickedSnsBtn = event.currentTarget const ActiveTooltip = clickedSnsBtn.nextElementSibling ActiveTooltip.classList.add("tooltip_active") }); snsBtn.addEventListener("mouseout", function () { const clickedSnsBtn = event.currentTarget const ActiveTooltip = clickedSnsBtn.nextElementSibling ActiveTooltip.classList.remove("tooltip_active") }); });
では上記のコードを下記にて詳しく解説します。
ツールチップで使う三角マークを作成する
吹き出しを作成したいのでテキストエリアに三角マークをくっつける必要があります。
<div class="tooltip_triangle"></div>
.tooltip_triangle { content : ""; position : absolute; top : -9px; left : 9px; border : 15px solid transparent; border-bottom: 15px solid #000000; }
ツールチップの三角マークは上記のコードで作成できます。position : absolute;を使って三角マークをテキストエリアとくっつけています。
ツールチップを非表示にする
.tooltip { width : 100%; display : none; }
作成したツールチップを隠した状態にしたいのでdisplay:noneで非表示にします。
ツールチップを表示させるためのクラスを作成する
.tooltip_active { display: block; }
非表示になっているツールチップを再表示させるためのクラスを作成します。マウスを乗せたら、このクラスを適用させます。
forEachで反復処理をする
const snsBtns = document.querySelectorAll(".sns_btn_js") snsBtns.forEach((snsBtn) => { });
今回はボタンが複数あるので、document.querySelectorAllとforEachを使って反復処理を行います。各SNSボタンには「.sns_btn_js」クラスを付与しています。これをdocument.querySelectorAllを活用して、変数:snsBtnsに格納します。
document.querySelectorAllを使うと下記のようにNodeListという配列に要素が保管されます。
このNodeListにある値は、forEachメソッドで反復処理が行えます。これにより一つ一つのボタンに対しての処理が行えます。
マウスカーソルを乗せるとツールチップを表示させる
snsBtn.addEventListener("mouseover", function () { const clickedSnsBtn = event.currentTarget const ActiveTooltip = clickedSnsBtn.nextElementSibling ActiveTooltip.classList.add("tooltip_active") });
「マウスカーソルを乗せると○○する」という処理は、「mouseover」で行えます。
event.currentTargetはイベントの対象になった要素を指定できるプロパティです。これによってマウスを乗せた対象物の要素を取得できます。
nextElementSiblingは次にあるHTML要素を指定できるプロパティです。今回はツールチップの「<div class=”tooltip”>~</div>」のHTML要素を取得しています。
ツールチップのHTML要素を格納した変数:ActiveTooltipに、「tooltip_active」というツールチップを表示させるためのクラスを付与します。これによってマウスを乗せたらツールチップが表示させる処理ができるようになります。
マウスカーソルを外すとツールチップが非表示になる
snsBtn.addEventListener("mouseout", function () { const clickedSnsBtn = event.currentTarget const ActiveTooltip = clickedSnsBtn.nextElementSibling ActiveTooltip.classList.remove("tooltip_active") });
mouseoverのみだと、ツールチップが表示されたままになります。そのためボタンからマウスカーソルを外すと、ツールチップが非表示になる処理も必要になります。
「マウスカーソルを外すと○○する」という処理を行いたいなら「mouseout」を使いましょう。その後に「classList.remove」でクラスを外してあげればツールチップが非表示になります。
GIV株式会社は、埼玉県川越市にあるWEB(ホームページ)制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。