QuickInfo beim Hover in JavaScript
In diesem Artikel wird die Erstellung von QuickInfos und deren Anzeige beim Überfahren mit der Maus mit HTML und JavaScript erläutert.
JavaScript-ToolTipp
In HTML und JavaScript können wir eine kleine Box erstellen und ihre Sichtbarkeit als ToolTip umschalten. Wir befassen uns mit dem Aktivieren oder Deaktivieren der Sichtbarkeit des ToolTip mithilfe einer benutzerdefinierten JavaScript-Funktion.
ToolTip bei Mouse-Hover mit HTML und JavaScript
Das Hover-Ereignis wird ausgelöst, wenn wir den Mauszeiger ohne einen Klick auf eine Komponente einer Webseite platzieren.
In JavaScript können wir das Tooltip-Feld aufrufen und umschalten, wenn der Benutzer den Mauszeiger auf ein Element bewegt, und wir können den Tooltip als Popup-Nachricht anzeigen.
Wir können eine Tooltip-Funktion mit HTML und CSS erstellen. Das Erstellen eines Tooltips und das Anzeigen von Text über das Element sparen unseren anfänglichen Platz auf der Webseite.
Beispielcode:
<!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>
Ausgang:
In der obigen HTML-Quelle haben wir das div-Tag <div></div> verwendet, das eine Box auf der Webseite erstellt. Das Tag <div> definiert die Klasse und verwendet die Funktion onmouseover, um die Funktion openToolTip() aufzurufen.
Innerhalb des <div> haben wir das <span>-Element als unseren Tooltip-Text verwendet und die id definiert. In <script>-Tags haben wir die openToolTip()-Funktion deklariert, in der wir die Toggle-Methode aufrufen und "show" übergeben.
Hier befasst sich das CSS mit der Sichtbarkeit des Tooltips, und wir haben CSS-Eigenschaften für das grundlegende Styling und die Positionierung des Tooltips verwendet.