В этой статье будет показана всплывающая подсказка с использованием простого JavaScript.
Как создать простую подсказку на JavaScript?
Чтобы создать всплывающую подсказку с помощью JavaScript, используйте « наведение мыши ' и ' мышь ' события. Следуйте приведенным ниже примерам для лучшего понимания.
Пример 1: всплывающая подсказка с использованием JavaScript
В данном примере мы создадим всплывающую подсказку на чистом JavaScript, а также стилизуем всплывающую подсказку, используя « стиль атрибут.
Во-первых, создайте текст, в котором мы хотим показывать всплывающую подсказку при наведении курсора мыши:
< h5 идентификатор '=' 'текст' > линукс h5 >
Получите текст, в котором будет отображаться всплывающая подсказка, используя « получитьэлемент по идентификатору() метод:
где левый '=' документ. получитьэлементбиид ( 'текст' ) ;
Теперь позвоните в « добавить прослушиватель событий () ', передав ' наведение мыши ” и функцию() в качестве параметра. В определенной функции сначала мы создадим всплывающую подсказку, создав « див », установите текст, который будет отображаться при наведении, и задайте стиль всплывающей подсказки с помощью « стиль атрибут. Наконец, добавьте всплывающую подсказку, используя « добавить дочерний элемент () метод:
лев. addEventListener ( 'наведите мышь' , функция ( ) {была подсказка '=' документ. создатьЭлемент ( 'див' ) ;
подсказка. внутреннийHTML '=' «Лучший сайт для обучения навыкам» ;
подсказка. стиль . видимость '=' 'видимый' ;
подсказка. стиль . позиция '=' 'абсолютный' ;
подсказка. стиль . фоновый цвет '=' 'rgb(107, 101, 101)' ;
подсказка. стиль . набивка '=' '5px' ;
подсказка. стиль . границаРадиус '=' '3px' ;
подсказка. стиль . цвет '=' 'белый' ;
подсказка. стиль . левый '=' 'пятьдесят%' ;
подсказка. стиль . ширина '=' '200 пикселей' ;
документ. тело . appendChild ( подсказка ) ;
} ) ;
Здесь используйте « мышь », которое удалит всплывающую подсказку, когда курсор будет удален от текста:
лев. addEventListener ( 'мышь' , функция ( ) {
документ. тело . удалитьребенка ( подсказка ) ;
} ) ;
Выход
Пример 2: всплывающая подсказка с использованием JavaScript с CSS
Вы также можете создать всплывающую подсказку на JavaScript с помощью CSS.
Для этого создайте область для отображения текста всплывающей подсказки с помощью тега и назначьте идентификатор « #мояПодсказка ”:
< идентификатор диапазона '=' 'моя подсказка' > охватывать >Получите ссылки на текст и всплывающую подсказку, используя « получитьэлемент по идентификатору() метод:
где левый '=' документ. получитьэлементбиид ( 'текст' ) ;была подсказка '=' документ. получитьэлементбиид ( 'моя подсказка' ) ;
Вызов всплывающей подсказки на « наведение мыши », задав текст в функции с помощью « внутреннийHTML ' свойство:
лев. addEventListener ( 'наведите мышь' , функция ( ) {подсказка. стиль . видимость '=' 'видимый' ;
подсказка. внутреннийHTML '=' «Лучший сайт для обучения навыкам» ;
} ) ;
Скрыть всплывающую подсказку на « мышь », установив параметр « видимость «собственность к» скрытый ”:
лев. addEventListener ( 'мышь' , функция ( ) {подсказка. стиль . видимость '=' 'скрытый' ;
} ) ;
Создать идентификатор “ #мояподсказка » в таблице стилей, которая будет стилизовать всплывающую подсказку:
#мояподсказка {видимость : скрытый ;
ширина : 200 пикселей ;
С - индекс : 1 ;
фон - цвет : RGB ( 107 , 101 , 101 ) ;
текст - выровнять : центр ;
цвет : белый ;
набивка : 5 пикселей 0 ;
граница - радиус : 3 пикселя ;
левый : пятьдесят %;
}
Как видите, всплывающая подсказка успешно реализована в тексте:
Как создать всплывающую подсказку с помощью HTML и CSS?
Вы также можете создать всплывающую подсказку без JavaScript. В файле HTML создайте текст « линукс », где будет отображаться всплывающая подсказка при наведении на нее курсора. Создайте элемент , чтобы задать текст всплывающей подсказки внутри тега заголовка/текста :
линукс
< охватывать сорт '=' 'текст подсказки' >
Платформа для обучения навыкам
охватывать >
h5 >
В таблице стилей создайте класс или идентификатор, который будет присвоен элементам HTML. Здесь мы создадим класс « подсказка », которому присвоен заголовок:
. подсказка {позиция : родственник ;
отображать : в соответствии - блокировать ;
}
Определить класс» всплывающая подсказка », чтобы стилизовать текст всплывающей подсказки и назначить ему HTML « <диапазон> ' ярлык:
. всплывающая подсказка {видимость : скрытый ;
ширина : 150 пикселей ;
фон - цвет : RGB ( 107 , 101 , 101 ) ;
цвет : #ффф ;
текст - выровнять : центр ;
набивка : 5 пикселей 0 ;
граница - радиус : 3 пикселя ;
позиция : абсолютный ;
С - индекс : 1 ;
нижний : 125 %;
левый : пятьдесят %;
допуск - левый : - 60 пикселей ;
непрозрачность : 0 ;
переход : непрозрачность 0,3 с ;
}
Набор ' парить ” эффект с “ подсказка », чтобы показать всплывающую подсказку об эффекте наведения:
. подсказка : парить . всплывающая подсказка {видимость : видимый ;
непрозрачность : 1 ;
}
Выход
Мы собрали все необходимые инструкции, относящиеся к простой всплывающей подсказке JavaScript.
Заключение
Чтобы создать всплывающую подсказку с помощью JavaScript, используйте « наведение мыши ' и ' мышь », который показывает всплывающую подсказку при наведении на элемент и скрывает ее при срабатывании события mouseout. Для стилизации всплывающей подсказки используйте « стиль ” в JavaScript. В этой статье мы продемонстрировали наилучшие возможные примеры создания всплывающей подсказки с использованием простого JavaScript, JavaScript с CSS и всплывающей подсказки без JavaScript.