Erstellen Sie eine einfache Tooltip-Schaltfläche in HTML

Migel Hewage Nimesha 20 Juni 2023

HTML HTML Tooltip

Kurzinfo in HTML
Grundlegender Tooltip für die Schaltfläche mit HTML
Erweiterter Tooltip für die Schaltfläche mit HTML und CCS
Positionierungs-Tooltips
Abschluss

Erstellen Sie eine einfache Tooltip-Schaltfläche in HTML

HyperText Markup Language, auch bekannt als HTML, ist eine Standard-Markup-Sprache, die zum Erstellen von Webseiten verwendet wird. Die Befehle eines Webbrowsers zum Anzeigen von Text, Bildern und anderen Multimediainhalten auf einer Webseite werden von HTML-Elementen bereitgestellt.

Kurzinfo in HTML

In HTML wird ein Tooltip verwendet, um weitere Informationen über das ausgewählte Element bereitzustellen; es kann ein Knopf oder ein Wort sein. Wenn ein Benutzer die Maus über ein Element bewegt, wobei ein Tooltip verwendet wird, um spezifische Informationen über dieses Element anzuzeigen, kann dies über den Maus-Hover-Effekt erfolgen.

Sehen wir uns an, wie Sie der Schaltfläche einen Tooltip hinzufügen.

Wir können der Schaltfläche einen Tooltip hinzufügen, indem wir das Attribut title zum Element button verwenden. Geben Sie die Details innerhalb der Kommas des Attributs Titel ein, die angezeigt werden sollen, wenn der Benutzer die Maus bewegt.

<button title="Click Here"> Button </button>

Erstellen Sie eine Schaltfläche in HTML. Fügen Sie dann das Attribut title zum Element button hinzu.

Der Beispielcode lautet wie folgt.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a simple button & Adding a tooltip to button -->
            <button title="Click Here">Button</button>
    </body>
</html>

Wie Sie sehen können, erscheint der Tooltip, wenn die Maus über die Schaltfläche bewegt wird.

Sehen wir uns weitere erweiterte QuickInfo-Beispiele für die Schaltfläche an.

Erstellen Sie zuerst eine Schaltfläche mit einem Containerelement (<div>) und fügen Sie eine tooltip-Klasse hinzu. Dieses <div> zeigt den Tooltip-Text an, wenn der Benutzer mit der Maus darüber fährt.

Ein Inline-Element im <span>-Stil mit class="tooltiptext" wird verwendet, um den Tooltip-Text zu enthalten.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

Erstellen Sie eine CSS-Datei

Lassen Sie uns eine CSS-Datei mit dem Namen style.css erstellen und sie mit der HTML-Datei verknüpfen, indem Sie die folgende Syntax zwischen den <head>-Tags in HTML einfügen.

<link rel="stylesheet" href="style.css">

Lassen Sie uns die Tooltip-Schaltfläche mit CSS gestalten. Der Stil der Schaltfläche ist in der Klasse .button enthalten.

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

Die Klasse .tooltip wird verwendet, um die Position des Tooltips anzuzeigen.

.tooltip {
    position: relative;
    display: inline-block;
}

Der Tooltip-Text wird in der Klasse .tooltiptext gespeichert. Es ist normalerweise verdeckt, wird aber sichtbar, wenn Sie den Mauszeiger darüber bewegen.

Darüber hinaus haben wir einige grundlegende Stile hinzugefügt, wie unten beschrieben.

Eine Breite von 120 Pixel
Ein gelber Hintergrund
Eine weiße Textfarbe
Die Möglichkeit, den Text zu zentrieren
Obere und untere Polsterung von 5px

Der Tooltip-Text hat aufgrund der CSS-Funktion border-radius abgerundete Kanten.

Wenn ein Benutzer seinen Cursor über ein <div>-Element mit der Klasse tooltip zieht, wird der Tooltip-Text mit dem Hover-Selektor angezeigt.

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

Positionierungs-Tooltips

QuickInfos können rechts, links, unten und oben neben der Schaltfläche angezeigt werden. Mal sehen, wie es geht.

Die folgenden Beispiele zeigen, wie QuickInfos links oder rechts angezeigt werden. Die top-Eigenschaft hat einen Wert von minus 5 Pixel.

Der Wert wird unter Berücksichtigung des Paddings berechnet. Wenn Sie bereit sind, die Polsterung zu erhöhen, erhöhen Sie die Eigenschaft top.

.tooltip .tooltiptext {

  /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

Wie Sie sehen können, erscheint der Tooltip nur auf der rechten Seite, wenn sich die Maus in eine beliebige Richtung bewegt.

.tooltip .tooltiptext {

  /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-left: 120px;
 }

Wie Sie sehen können, erscheint der Tooltip nur auf der linken Seite, wenn sich die Maus in eine beliebige Richtung bewegt.

Die folgenden Beispiele zeigen, wie QuickInfos oben oder unten angezeigt werden. Die Eigenschaft margin-left hat einen Wert von minus 60 Pixel.

Der Wert errechnet sich aus der halben Breite des Tooltips (120/2 = 60).

.tooltip .tooltiptext {
     /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-top: 40px;
    margin-left: 120px;
 }

Wie Sie sehen können, erscheint der Tooltip nur oben, wenn sich die Maus in eine beliebige Richtung bewegt.

.tooltip .tooltiptext {
 /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-left: 120px;
 }

Wie Sie sehen können, erscheint der Tooltip nur unten, wenn sich die Maus in eine beliebige Richtung bewegt.

Abschluss

In diesem Artikel wurde erläutert, wie Sie mithilfe von HTML eine einfache QuickInfo-Schaltfläche erstellen. Dann besprachen wir das Erstellen einer erweiterten QuickInfo-Schaltfläche mit HTML und CSS und das Anzeigen von QuickInfos rechts, links, oben und unten auf der Schaltfläche.

Autor: Migel Hewage Nimesha

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Erstellen Sie eine einfache Tooltip-Schaltfläche in HTML

Kurzinfo in HTML

Grundlegender Tooltip für die Schaltfläche mit HTML

Erweiterter Tooltip für die Schaltfläche mit HTML und CCS

Erstellen Sie eine CSS-Datei

Positionierungs-Tooltips

Rechter Tooltip

Linker Tooltip

Oberer Tooltip

Unterer Tooltip

Abschluss