Tämä artikkeli esittelee työkaluvihjeen käyttämällä tavallista JavaScriptiä.
Kuinka luoda yksinkertainen JavaScript-työkaluvihje?
Voit luoda työkaluvihjeen JavaScriptin avulla käyttämällä ' hiiren osoitin ' ja ' hiiri pois ' Tapahtumat. Seuraa alla annettuja esimerkkejä ymmärtääksesi paremmin.
Esimerkki 1: Työkaluvinkki JavaScriptin käyttäminen
Annetussa esimerkissä luomme työkaluvihjeen puhtaalla JavaScriptillä ja muotoilemme työkaluvihjeen myös käyttämällä ' tyyli ”-attribuutti.
Luo ensin teksti, jossa haluamme näyttää työkaluvihjeen hiiren osoitintapahtumasta:
< h5 id = 'teksti' > Linux h5 >
Hanki teksti, jossa työkaluvihje tulee näkyviin käyttämällä ' getElementById() 'menetelmä:
missä lh = asiakirja. getElementById ( 'teksti' ) ;
Soita nyt ' addEventListener() ' -menetelmä ohittamalla ' hiiren osoitin ” tapahtuma ja funktio() parametrina. Määritetyssä funktiossa luomme ensin työkaluvihjeen luomalla ' div ' -elementtiä, aseta teksti, joka näytetään osoittimessa, ja aseta työkaluvihjeen tyyli ' tyyli ”-attribuutti. Lisää lopuksi työkaluvihje käyttämällä ' appendChild() 'menetelmä:
lh. addEventListener ( 'hiiri päälle' , toiminto ( ) {oli työkaluvinkki = asiakirja. CreateElement ( 'div' ) ;
työkaluvihje. innerHTML = 'Paras verkkosivusto taitojen oppimiseen' ;
työkaluvihje. tyyli . näkyvyys = 'näkyvä' ;
työkaluvihje. tyyli . asema = 'absoluuttinen' ;
työkaluvihje. tyyli . taustaväri = 'rgb(107, 101, 101)' ;
työkaluvihje. tyyli . pehmuste = '5px' ;
työkaluvihje. tyyli . rajasäde = '3px' ;
työkaluvihje. tyyli . väri = 'valkoinen' ;
työkaluvihje. tyyli . vasemmalle = 'viisikymmentä%' ;
työkaluvihje. tyyli . leveys = '200px' ;
asiakirja. kehon . liitä lapsi ( työkaluvihje ) ;
} ) ;
Käytä tässä ' hiiri pois ' tapahtuma, joka poistaa työkaluvihjeen, kun kohdistin siirtyy pois tekstistä:
lh. addEventListener ( 'mouseout' , toiminto ( ) {
asiakirja. kehon . poista lapsi ( työkaluvihje ) ;
} ) ;
Lähtö
Esimerkki 2: Työkaluvinkki JavaScriptin käyttäminen CSS:n kanssa
Voit myös luoda työkaluvihjeen JavaScriptillä CSS:n avulla.
Luo tätä varten alue, jossa näkyy työkaluvihjeen teksti -tunnisteen avulla ja määritä tunnus ' #omatyökaluvinkki ':
< span id = 'oma työkaluvinkki' > jänneväli >Hanki viittaukset tekstiin ja työkaluvihjeeseen käyttämällä ' getElementById() 'menetelmä:
missä lh = asiakirja. getElementById ( 'teksti' ) ;oli työkaluvinkki = asiakirja. getElementById ( 'oma työkaluvinkki' ) ;
Soita työkaluvihjeeseen hiiren osoitin ' -tapahtuma asettamalla funktion teksti ' innerHTML ”omaisuus:
lh. addEventListener ( 'hiiri päälle' , toiminto ( ) {työkaluvihje. tyyli . näkyvyys = 'näkyvä' ;
työkaluvihje. innerHTML = 'Paras verkkosivusto taitojen oppimiseen' ;
} ) ;
Piilota työkaluvihje ' hiiri pois tapahtuma asettamalla ' näkyvyys 'omaisuus' piilotettu ':
lh. addEventListener ( 'mouseout' , toiminto ( ) {työkaluvihje. tyyli . näkyvyys = 'piilotettu' ;
} ) ;
Luo tunnus' #omatyökaluvinkki ' tyylisivulla, joka muokkaa työkaluvihjeen tyyliä:
#omatyökaluvinkki {näkyvyys : piilotettu ;
leveys : 200 pikseliä ;
Kanssa - indeksi : 1 ;
tausta - väri : rgb ( 107 , 101 , 101 ) ;
teksti - kohdistaa : keskusta ;
väri : valkoinen ;
pehmuste : 5px 0 ;
rajaa - säde : 3px ;
vasemmalle : viisikymmentä %;
}
Kuten näet, työkaluvihje on onnistuneesti toteutettu tekstissä:
Kuinka luoda työkaluvihje HTML:n ja CSS:n avulla?
Voit myös luoda työkaluvinkin ilman JavaScriptiä. Luo HTML-tiedostoon teksti ' Linux ”, jossa työkaluvihje näytetään, kun se vie hiiren sen päällä. Luo -elementti asettaaksesi työkaluvihjeen tekstin heading/text -tunnisteen sisällä:
Linux
< jänneväli luokkaa = 'työkaluvihjeteksti' >
Alusta oppia taitoja
jänneväli >
h5 >
Luo tyylisivulle luokka tai tunnus, joka liitetään HTML-elementteihin. Täällä luomme luokan ' työkaluvihje ', joka on liitetty otsikkoon:
. työkaluvihje {asema : suhteellinen ;
näyttö : linjassa - lohko ;
}
Määritä luokka ' työkaluvihjeteksti ' muokata työkaluvihjeen tekstiä ja määrittää sille HTML' 'tunniste:
. työkaluvihjeteksti {näkyvyys : piilotettu ;
leveys : 150 pikseliä ;
tausta - väri : rgb ( 107 , 101 , 101 ) ;
väri : #F F F ;
teksti - kohdistaa : keskusta ;
pehmuste : 5px 0 ;
rajaa - säde : 3px ;
asema : ehdoton ;
Kanssa - indeksi : 1 ;
pohja : 125 %;
vasemmalle : viisikymmentä %;
marginaali - vasemmalle : - 60 pikseliä ;
opasiteetti : 0 ;
siirtyminen : opasiteetti 0,3s ;
}
Aseta ' leijuu 'tehoste ' työkaluvihje ” luokka näyttääksesi työkaluvihjeen hover-tehosteesta:
. työkaluvihje : leijaile. työkaluvihjeteksti {näkyvyys : näkyvissä ;
opasiteetti : 1 ;
}
Lähtö
Olemme koonneet kaikki tarvittavat ohjeet, jotka liittyvät tavalliseen JavaScript-työkaluvihjeeseen.
Johtopäätös
Voit luoda työkaluvihjeen JavaScriptin avulla käyttämällä ' hiiren osoitin ' ja ' hiiri pois ”-tapahtumat, joka näyttää työkaluvihjeen viemällä hiiren osoittimen elementin päälle ja piilottaa sen, kun mouseout-tapahtuma käynnistetään. Käytä työkaluvihjeen tyyliin ' tyyli ”-attribuutti JavaScriptissä. Tässä artikkelissa osoitimme parhaita mahdollisia esimerkkejä työkaluvihjeen luomisesta käyttämällä tavallista JavaScriptiä, JavaScriptiä CSS:n kanssa ja työkaluvihjeitä ilman JavaScriptiä.