Овај чланак ће показати опис алата користећи обичан ЈаваСцрипт.
Како да направите обичан ЈаваСцрипт Тоолтип?
Да бисте направили опис алата користећи ЈаваСцрипт, користите „ Миша преко ' и ' моусеоут ” догађаји. Пратите доле наведене примере за боље разумевање.
Пример 1: Објашњење помоћу ЈаваСцрипт-а
У датом примеру, креираћемо опис алатке у чистом ЈаваСцрипт-у и такође стилизовати опис алата користећи „ стил ” атрибут.
Прво, креирајте текст где желимо да прикажемо објашњење о догађају преласка миша:
< х5 ид = 'текст' > Линук х5 >
Узмите текст где ће се појавити опис алатке помоћу „ гетЕлементБиИд() ” метод:
где лх = документ. гетЕлементБиИд ( 'текст' ) ;
Сада позовите „ аддЕвентЛистенер() ” метод преношењем „ Миша преко ” догађај и функцију() као параметар. У дефинисаној функцији, прво ћемо креирати опис алата креирањем „ див ” елемент, подесите текст који ће бити приказан при лебдењу и подесите неки стил описа алатке користећи „ стил ” атрибут. На крају, додајте опис алатке помоћу „ аппендЦхилд() ” метод:
лх. аддЕвентЛистенер ( 'Миша преко' , функција ( ) {била је алатка = документ. цреатеЕлемент ( 'див' ) ;
тоолтип. иннерХТМЛ = „Најбоља веб локација за учење вештина“ ;
тоолтип. стил . видљивост = 'видљиво' ;
тоолтип. стил . положај = 'апсолутни' ;
тоолтип. стил . боја позадине = 'ргб(107, 101, 101)' ;
тоолтип. стил . паддинг = '5пк' ;
тоолтип. стил . бордерРадиус = '3пк' ;
тоолтип. стил . боја = 'бео' ;
тоолтип. стил . лево = 'педесет%' ;
тоолтип. стил . ширина = '200пк' ;
документ. тело . аппендЦхилд ( тоолтип ) ;
} ) ;
Овде користите „ моусеоут ” догађај који ће уклонити опис алатке док се курсор удаљи од текста:
лх. аддЕвентЛистенер ( 'моусеоут' , функција ( ) {
документ. тело . ремовеЦхилд ( тоолтип ) ;
} ) ;
Излаз
Пример 2: Објашњење помоћу ЈаваСцрипт-а са ЦСС-ом
Такође можете да направите опис алатке у ЈаваСцрипт-у помоћу ЦСС-а.
Да бисте то урадили, направите област за приказ текста објашњења користећи ознаку <спан> и доделите ид “ #миТоолтип ”:
< спан ид = 'моја објава' > спан >Узмите референце текста и опис алата користећи „ гетЕлементБиИд() ” метод:
где лх = документ. гетЕлементБиИд ( 'текст' ) ;била је алатка = документ. гетЕлементБиИд ( 'моја објава' ) ;
Позовите објашњење на „ Миша преко ” догађај постављањем текста у функцију помоћу „ иннерХТМЛ ' имовина:
лх. аддЕвентЛистенер ( 'Миша преко' , функција ( ) {тоолтип. стил . видљивост = 'видљиво' ;
тоолтип. иннерХТМЛ = „Најбоља веб локација за учење вештина“ ;
} ) ;
Сакријте савет на „ моусеоут ” догађај постављањем „ видљивост ” својство за “ сакривен ”:
лх. аддЕвентЛистенер ( 'моусеоут' , функција ( ) {тоолтип. стил . видљивост = 'сакривен' ;
} ) ;
Направите ИД “ #миТоолтип ” у опису стилова који ће стилизирати опис алата:
#миТоолтип {видљивост : сакривен ;
ширина : 200пк ;
Витх - индекс : 1 ;
позадини - боја : ргб ( 107 , 101 , 101 ) ;
текст - поравнајте : центар ;
боја : бео ;
паддинг : 5пк 0 ;
граница - радијус : 3пк ;
лево : педесет %;
}
Као што видите да је опис алатке успешно имплементиран у тексту:
Како направити опис алата користећи ХТМЛ и ЦСС?
Такође можете да направите опис алата без ЈаваСцрипт-а. У ХТМЛ датотеци направите текст „ Линук “, где ће се приказати опис алата док лебдите на њему. Креирајте елемент <спан> да бисте поставили текст за опис алатке унутар ознаке хеадинг/тект <х5>:
< х5 класа = 'опис алата' >Линук
< спан класа = 'тоолтиптект' >
Платформа за учење вештина
спан >
х5 >
У листи стилова направите класу или ид који ће бити додељен ХТМЛ елементима. Овде ћемо креирати класу “ тоолтип ” који је додељен наслову:
. тоолтип {положај : релативан ;
приказ : у реду - блокирати ;
}
Дефинишите класу ' тоолтиптект ” да стилизујете текст објашњења и доделите му ХТМЛ “ <спан> ” ознака:
. тоолтиптект {видљивост : сакривен ;
ширина : 150пк ;
позадини - боја : ргб ( 107 , 101 , 101 ) ;
боја : #ффф ;
текст - поравнајте : центар ;
паддинг : 5пк 0 ;
граница - радијус : 3пк ;
положај : апсолутна ;
Витх - индекс : 1 ;
дно : 125 %;
лево : педесет %;
маргина - лево : - 60пк ;
непрозирност : 0 ;
прелаз : непрозирност 0.3с ;
}
Комплет ' лебдети ” ефекат са „ тоолтип ” да би се приказао опис алата о ефекту лебдења:
. тоолтип : лебдети . тоолтиптект {видљивост : видљиво ;
непрозирност : 1 ;
}
Излаз
Саставили смо сва потребна упутства релевантна за обичан ЈаваСцрипт алат.
Закључак
Да бисте направили опис алата користећи ЈаваСцрипт, користите „ Миша преко ' и ' моусеоут ” догађаји, који приказује опис алата када се лебди над елементом и сакрива га када се покрене догађај моусеоут. За стилизовање описа алатке користите „ стил ” атрибут у ЈаваСцрипт-у. У овом чланку смо демонстрирали најбоље могуће примере прављења описа алата користећи обичан ЈаваСцрипт, ЈаваСцрипт са ЦСС-ом и опис алата без ЈаваСцрипт-а.