つぶやき
-ブログ-

javascriptでツールチップを作成する方法

2023年1月12日

ツールチップとは下記の画像のように、マウスカーソルを乗せると表示される吹き出しのようなものです。これがあれば分かりにくい情報を伝えやすくなります。

今回はこのツールチップを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（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。

前の記事へ

次の記事へ

一覧へ戻る

つぶやき-ブログ-