JavaScript のホバー時のツールチップ
Muhammad Muzammil Hussain
2023年6月20日
この記事では、ToolTip を作成し、HTML と JavaScript を使用してマウス ホバーに表示する方法について説明します。
JavaScript ツールチップ
HTML と JavaScript では、小さなボックスを作成し、その可視性をツールチップとして切り替えることができます。 JavaScript カスタム関数を使用して、ToolTip の可視性を有効または無効にします。
HTML と JavaScript を使用したマウス ホバー時のツールチップ
hover イベントは、Web ページのコンポーネントをクリックせずにマウス カーソルを置いたときにトリガーされます。
JavaScript では、ユーザーが項目にカーソルを置いたときにマウス ホバー時にツールヒント ボックスを呼び出して切り替えることができ、ツールヒントをポップアップ メッセージとして表示できます。
HTML と CSS を使用してツールチップ機能を作成できます。 ツールチップを作成し、アイテムに関するテキストを表示すると、Web ページの最初のスペースを節約できます。
コード例:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.class {
-webkit-user-select: none;
position: relative;
}
.displayText {
position: absolute;
bottom: -230%;
left: 50%;
margin-left: -80px;
width: 160px;
background-color: lightgrey;
text-align: center;
border-radius: 6px;
padding: 8px 0;
visibility: hidden;
}
.displayText::before {
content: "";
border-width: 5px;
border-style: solid;
top: -28%;
left: 35%;
border-color: transparent transparent lightgrey transparent;
position: absolute;
}
.show {
visibility: visible;
}
</style>
</head>
<body>
<h2>DelftStack learning</h2>
<h3>JavaScript open tooltip on hover</h3>
<div class="class" onmouseover="openToolTip()">Hover on me to open ToolTip
<span class="displayText" id="displayText">ToolTip Text</span> <! –– tooltip box and text ––>
</div>
<script>
function openToolTip () {
var tooltipPopup = document.getElementById("displayText");
tooltipPopup.classList.toggle("show"); // toggle the tooltip
}
</script>
</body>
</html>
出力：
上記のhtmlソースでは、webページにボックスを作るdivタグ<div></div>を使用しました。 <div> タグはクラスを定義し、onmouseover 関数を使用して openToolTip() 関数を呼び出します。
<div> 内で、<span> 要素をツールチップ テキストとして使用し、id を定義しました。 <script> タグで openToolTip() 関数を宣言し、そこでトグル メソッドを呼び出して "show" を渡しました。
ここでは、CSS がツールチップの可視性を処理し、ツールチップの基本的なスタイルと配置に CSS プロパティを使用しました。