Zwykła podpowiedź JavaScript

Pogląd to małe, informacyjne okienko, które wyświetla się, gdy użytkownik unosi się nad elementem, taki jak przycisk lub tekst. Mówiąc dokładniej, celem podpowiedzi jest dostarczenie dodatkowych informacji lub wyjaśnienia na temat danego elementu.

W tym artykule zademonstruje podpowiedź za pomocą zwykłego JavaScript.

Jak stworzyć prostą podpowiedź JavaScript?

Aby utworzyć podpowiedź za pomocą JavaScript, użyj „myszy" I "Museout„Wydarzenia. Postępuj zgodnie z poniższymi przykładami, aby uzyskać lepsze zrozumienie.

Przykład 1: Tooltip za pomocą JavaScript

W danym przykładzie utworzymy podpowiedź w czystym JavaScript, a także stylizujemy podpowiedź za pomocą „styl" atrybut.

Najpierw utwórz tekst, w którym chcemy pokazać podpowiedź na wydarzeniu Mouseover:

Linuxhint

Zdobądź tekst, w którym pojawi się podpowiedź za pomocą „getElementById ()" metoda:

var lh = dokument.getElementById („tekst”);

Teraz zadzwoń do „addEventListener ()„Metoda, przekazując„myszy”Zdarzenie i funkcja () jako parametr. W określonej funkcji najpierw utworzymy podpowiedź, tworząc „div”Element, ustaw tekst, który zostanie wyświetlony na zawisie, i ustawienie stylizacji podpowiedzi za pomocą„styl" atrybut. Na koniec dodaj podpowiedź za pomocą „appendChild ()" metoda:

LH.addEventListener („MOUSEOVER”, function ()
var tooltip = dokument.createElement („div”);
podpowiedź.innerHtml = „Najlepsza strona internetowa do nauki umiejętności”;
podpowiedź.styl.visibity = „Visible”;
podpowiedź.styl.pozycja = „Absolute”;
podpowiedź.styl.Tło Color = "RGB (107, 101, 101)";
podpowiedź.styl.padding = "5px";
podpowiedź.styl.borderRadius = "3px";
podpowiedź.styl.color = „biały”;
podpowiedź.styl.left = "50%";
podpowiedź.styl.szerokość = "200px";
dokument.ciało.appendChild (podpowiedź);
);

Tutaj skorzystaj z „Museout„Wydarzenie, które usunie podpowiedź, podczas gdy kursor odejdzie od tekstu:

LH.addEventListener („MOUSEOut”, function ()
dokument.ciało.resecyeChild (podpowiedź);
);

Wyjście

Przykład 2: Tooltip za pomocą JavaScript z CSS

Możesz także utworzyć podpowiedź w JavaScript z CSS.

Aby to zrobić, utwórz obszar, aby pokazać tekst podpowiedzi za pomocą znacznika i przypisz identyfikator „#MyTooltip”:

= "MyTooltip">

Uzyskaj odniesienia do tekstu i podpowiedź za pomocą „getElementById ()" metoda:

var lh = dokument.getElementById („tekst”);
var tooltip = dokument.getElementById („MyTooltip”);

Zadzwoń do podpowiedzi „myszy”Zdarzenie, ustawiając tekst w funkcji za pomocą„InnerHtml" nieruchomość:

LH.addEventListener („MOUSEOVER”, function ()
podpowiedź.styl.visibity = „Visible”;
podpowiedź.innerHtml = „Najlepsza strona internetowa do nauki umiejętności”;
);

Ukryj podpowiedź w „Museout„Wydarzenie, ustawiając„widoczność„Własność do„ukryty”:

LH.addEventListener („MOUSEOut”, function ()
podpowiedź.styl.visibility = „ukryty”;
);

Utwórz identyfikator „#MyTooltip„W arkuszu stylów, który stylizuje podpowiedź:

#MyToolTip
Widoczność: ukryta;
szerokość: 200px;
z-index: 1;
kolor tła: RGB (107, 101, 101);
Text-Align: Center;
kolor biały;
Wyściółka: 5px 0;
Radiusz graniczny: 3px;
Po lewej: 50%;

Jak widać, podpowiedź została pomyślnie zaimplementowana w tekście:

Jak tworzyć podpowiedź za pomocą HTML i CSS?

Możesz także utworzyć podpowiedź bez JavaScript. W pliku HTML utwórz tekst „Linuxhint”, Gdzie podpowiedź zostanie wyświetlona podczas unoszenia się na nim. Utwórz element, aby ustawić tekst dla podpowiedzi wewnątrz nagłówka/tekstu

etykietka:

Linuxhint
class = "tooltiptext">
Platforma do nauki umiejętności

W arkuszu stylów utwórz klasę lub identyfikator, który zostanie przypisany do elementów HTML. Tutaj stworzymy klasę „podpowiedź”To przypisane do nagłówka:

.podpowiedź
Pozycja: względny;
Wyświetlacz: Block Inline;

Zdefiniuj klasę „Podsumowanie„Aby stylizować tekst podpowiedzi i przypisać mu HTML””Tag:

.tooltiptext
Widoczność: ukryta;
szerokość: 150px;
kolor tła: RGB (107, 101, 101);
kolor: #fff;
Text-Align: Center;
Wyściółka: 5px 0;
Radiusz graniczny: 3px;
Pozycja: absolutna;
z-index: 1;
Dół: 125%;
Po lewej: 50%;
margines -lew: -60px;
Krycie: 0;
przejście: krycie 0.3s;

Ustawić "unosić się„Efekt z„podpowiedź„Klasa, aby pokazać podpowiedź na temat efektu zawisowego:

.Pudłoka: zawieszek .tooltiptext
Widoczność: widoczna;
Krycie: 1;

Wyjście

Skompilowaliśmy wszystkie niezbędne instrukcje dotyczące zwykłego podpowiedzi JavaScript.

Wniosek

Aby utworzyć podpowiedź za pomocą JavaScript, użyj „myszy" I "Museout”Wydarzenia, które pokazują podpowiedź na zawisie w elemencie i ukrywa ją, gdy zdarzenie myszy jest uruchamiane. Do stylizacji podpowiedzi użyj „styl”Atrybut w JavaScript. W tym artykule zademonstrowaliśmy najlepsze możliwe przykłady tworzenia podpowiedzi za pomocą zwykłego JavaScript, JavaScript z CSS i podpowiedzi bez JavaScript.