Bu makale, düz JavaScript kullanan araç ipucunu gösterecektir.
Düz JavaScript İpucu Nasıl Oluşturulur?
JavaScript kullanarak bir araç ipucu oluşturmak için ' fareyle üzerine gelindiğinde ' Ve ' fareyle dışarı çıkma ' olaylar. Daha iyi anlamak için aşağıda verilen örnekleri izleyin.
Örnek 1: JavaScript Kullanarak Araç İpucu
Verilen örnekte, saf JavaScript'te bir araç ipucu oluşturacağız ve ayrıca araç ipucunu ' stil ' bağlanmak.
İlk olarak, mouseover olayında bir araç ipucu göstermek istediğimiz bir metin oluşturun:
< h5 kimliği = 'metin' > linux h5 >
Araç ipucunun görüneceği metni ' getElementById() ' yöntem:
nerede = belge. getElementById ( 'metin' ) ;
Şimdi, “ addEventListener() ” yöntemini geçerek “ fareyle üzerine gelindiğinde ” olayı ve parametre olarak bir işlev(). Tanımlanan fonksiyonda ilk olarak “” oluşturarak tooltip oluşturacağız. div ” öğesi, fareyle üzerine gelindiğinde gösterilecek metni ayarlayın ve “ öğesini kullanarak araç ipucunun bazı stillerini ayarlayın. stil ' bağlanmak. Son olarak, “ kullanarak araç ipucunu ekleyin. eklemeChild() ' yöntem:
lh. addEventListener ( 'fare üzerinde' , işlev ( ) {araç ipucuydu = belge. öğe oluştur ( 'div' ) ;
araç ipucu. içHTML = 'Beceri öğrenmek için en iyi web sitesi' ;
araç ipucu. stil . görünürlük = 'görünür' ;
araç ipucu. stil . konum = 'mutlak' ;
araç ipucu. stil . arka plan rengi = 'rgb(107, 101, 101)' ;
araç ipucu. stil . dolgu malzemesi = '5 piksel' ;
araç ipucu. stil . kenarlık Yarıçapı = '3 piksel' ;
araç ipucu. stil . renk = 'beyaz' ;
araç ipucu. stil . sol = 'elli%' ;
araç ipucu. stil . Genişlik = '200 piksel' ;
belge. vücut . eklemeChild ( ipucu ) ;
} ) ;
Burada, “ fareyle dışarı çıkma ” İmleç metinden uzaklaşırken araç ipucunu kaldıracak olay:
lh. addEventListener ( 'fare' , işlev ( ) {
belge. vücut . kaldırChild ( ipucu ) ;
} ) ;
Çıktı
Örnek 2: JavaScript'i CSS ile Kullanma İpucu
CSS ile JavaScript'te bir araç ipucu da oluşturabilirsiniz.
Bunu yapmak için etiketini kullanarak araç ipucunun metnini gösterecek bir alan oluşturun ve bir kimlik atayın ' #myTooltip ”:
< yayılma kimliği = 'İpucum' > açıklık >Metnin referanslarını ve araç ipucunu “ kullanarak alın. getElementById() ' yöntem:
nerede = belge. getElementById ( 'metin' ) ;araç ipucuydu = belge. getElementById ( 'İpucum' ) ;
Araç ipucunu “ fareyle üzerine gelindiğinde ” olayını fonksiyondaki metni ayarlayarak “ içHTML ' mülk:
lh. addEventListener ( 'fare üzerinde' , işlev ( ) {araç ipucu. stil . görünürlük = 'görünür' ;
araç ipucu. içHTML = 'Beceri öğrenmek için en iyi web sitesi' ;
} ) ;
Araç ipucunu “ fareyle dışarı çıkma ayarlayarak ” olay görünürlük ' mülk ' gizlenmiş ”:
lh. addEventListener ( 'fare' , işlev ( ) {araç ipucu. stil . görünürlük = 'gizlenmiş' ;
} ) ;
Bir kimlik oluştur ' #myTooltip Araç ipucuna stil verecek olan stil sayfasında:
#myTooltip {görünürlük : gizlenmiş ;
Genişlik : 200 piksel ;
İle - dizin : 1 ;
arka plan - renk : rgb ( 107 , 101 , 101 ) ;
metin - hizalamak : merkez ;
renk : beyaz ;
dolgu malzemesi : 5 piksel 0 ;
sınır - yarıçap : 3 piksel ;
sol : elli %;
}
Gördüğünüz gibi araç ipucu metne başarıyla uygulandı:
HTML ve CSS Kullanarak Araç İpucu Nasıl Oluşturulur?
JavaScript olmadan da bir araç ipucu oluşturabilirsiniz. HTML dosyasında “ metnini oluşturun. linux Araç ipucunun üzerine gelindiğinde gösterileceği yer. Başlık/metin
etiketi içindeki araç ipucu metnini ayarlamak için öğesi oluşturun:
< h5 sınıf = 'araç ipucu' >
linux
< açıklık sınıf = 'araç ipucu metni' >
Becerileri öğrenmek için bir platform
açıklık >
h5 >
Stil sayfasında, HTML öğelerine atanacak bir sınıf veya kimlik oluşturun. Burada bir sınıf oluşturacağız” ipucu ” başlığına atanan:
. ipucu {
konum : akraba ;
görüntülemek : Çizgide - engellemek ;
}
Bir sınıf tanımlayın ' araç ipucu metni ” araç ipucu metnine stil vermek ve ona HTML atamak için “
. araç ipucu metni {
görünürlük : gizlenmiş ;
Genişlik : 150 piksel ;
arka plan - renk : rgb ( 107 , 101 , 101 ) ;
renk : #ffff ;
metin - hizalamak : merkez ;
dolgu malzemesi : 5 piksel 0 ;
sınır - yarıçap : 3 piksel ;
konum : mutlak ;
İle - dizin : 1 ;
alt : 125 %;
sol : elli %;
marj - sol : - 60 piksel ;
opaklık : 0 ;
geçiş : opaklık 0,3 saniye ;
}
Ayarlamak ' üzerine gelin ” ile “ etkisi ipucu Vurgulu etkiyle ilgili araç ipucunu göstermek için ” sınıfı:
. ipucu : üzerine gelin araç ipucu metni {
görünürlük : görünür ;
opaklık : 1 ;
}
Çıktı
Düz JavaScript araç ipucuyla ilgili tüm gerekli talimatları derledik.
Çözüm
JavaScript kullanarak bir araç ipucu oluşturmak için ' fareyle üzerine gelindiğinde ' Ve ' fareyle dışarı çıkma Öğe üzerine gelindiğinde araç ipucunu gösteren ve mouseout olayı tetiklendiğinde bunu gizleyen olaylar. Araç ipucunu şekillendirmek için “ stil ” JavaScript'teki öznitelik. Bu makalede, düz JavaScript, CSS ile JavaScript ve JavaScript'siz bir araç ipucu kullanarak bir araç ipucu oluşturmanın mümkün olan en iyi örneklerini gösterdik.