Bootstrap Tooltip: stvorite opise alata

Kako Vašu web stranicu učiniti privlačnom za posjetitelje? To je pitanje koje se tiče gotovo svih vlasnika internetskih resursa: trgovaca, blogera, vlasnika malih i velikih tvrtki, putnika i samo kreativnih ljudi koji imaju nešto reći svijetu.

Zašto bi stranica bila lijepa i funkcionalna?

Broj posjeta ovisi o subjektu stranice i njegovoj ciljnoj publici, interesu ljudi za određeni proizvod, privicima, promociji, popunjavanju i mnogim drugim čimbenicima. No, ne može se poreći da je stranica "susret na odjeću." To je prva i glavna stranica izvora je njegovo lice, posjetnica, u kojoj posjetitelj mora razumjeti želi li potrošiti svoje vrijeme na daljnje pregledavanje sadržaja.


I ne postoji pravo pogrešiti! Prema studijama s jednog od američkih tehničkih sveučilišta, prvi dojam o mjestu je u posjetitelju za manje od sekunde. U prosjeku, osoba "pretražuje" web-lokaciju za 3 sekunde. Brzina munje, zar ne?! Iz izgleda glavne stranice, to ovisi o uspjehu resursa. Prva stvar na koju ljudi obraćaju pozornost je logo, a drugi je navigacija. A ako je logotip manje ili više jasan, onda su navigacija, izbornik i ergonomija stranice dobro mjesto za lomljenje glave. Pojavljuje se razumno pitanje: "Kako ukrasiti vašu stranicu, učiniti je što funkcionalnijom i udobnijom, ali u isto vrijeme lijepom?" Postoji mnogo neobičnih ideja koje se mogu ponuditi, ali jedna od najzanimljivijih jepopup savjeti.


Što su savjeti za pop-up? Osim što je izvrstan alat za poboljšanje funkcionalnosti web-mjesta, opisi alata su alat koji korisniku omogućuje prelazak preko ikone, riječi ili slike kako bi vidio objašnjenje za određenu sliku.

Skup alata za opise alata

Bootstrap je najprikladniji za stvaranje pop-up upita. To je jednostavan za naučiti predložak postaviti za stvaranje aplikacija i web stranice napisane u HTML, CSS, Sass i javascript.
Ako je navedeno, tada se jedan od grafičkih elemenata Bootstrap predloška - Tooltip koristi za skočne upite. Bootstrap okvir stvoren je za "Twitter" i izvorno se zvao "Twitter blu-print". Nakon nekih promjena u 2012., dobio je rešetku u 12 stupaca, postao prilagodljiv i stekao uobičajeno ime - Tooltip. Tip je element koji se pojavljuje kada prelazite pokazivačem iznad određenog elementa na zaslonu monitora.

Stvaranje tooltipa

Alat Bootstrap Tooltip možete stvoriti pomoću atributa podataka, kao i aktiviranjem elemenata Javascript skripte. Postoje dva glavna načina za stvaranje Tooltip alata HTML Bootstrap Tooltip. Bit prvog je primjena atributa data-toggle = "tooltip" i naslova atributa (naslova) koji će sadržavati tekst alata. Tooltip će se pojaviti na vrhu (zadana postavka). Važno je zapamtiti da se prompt mora inicijalizirati, budući da je automatska inicijalizacija otkazana u Twitter bootstrap-u zbog povećane produktivnosti.
Kako biInicijaliziranjem upita koristi se poseban javascript koji vraća stil alata svim elementima koji imaju atribut data-toggle = "tooltip". Bit druge metode je aktiviranje pomoću JavaScript skriptnih kartica s jQuery knjižnicom pisanjem klase alata koja uključuje tooltip. Metoda je slična prvoj, osim metode odabira elemenata. Možete uključiti prijedloge za Javascript na način prikazan u nastavku.

Primjer opisa alata za podizanje sustava

Postoje četiri glavne opcije za stavljanje opisa alata: na lijevi i desni rub, kao i na vrh i dno elementa.
Top Savjet
Naputak udesno
Savjet ispod
Naputak lijevo

Primjena upita

Postoji mnogo primjena Bootstrap Tooltip-a. Alatne opise možete zalijepiti tako da korisnik može razumjeti prijevod teksta iz stranog jezika u tekst. Pomoću alata možete koristiti i alat kao pomoć korisniku u razumijevanju vrijednosti gumba pri kretanju iznad njih. Predlošci alata Bootstrap Tooltip često se koriste na web-lokacijama u različitim organizacijama za izradu pretplate na vijesti. To vam omogućuje da svoje klijente održavate ažurnim o poslovima, a posjetiteljima također pruža mogućnost primanja novih informacija, kao što su veličina popusta, ponude, promjene unutar tvrtke.
Razmotrite primjer kada korisnik treba unijeti svoju adresu e-pošte kako bi se pretplatio na distribuciju. zadatakPružanje pretplate za klijente vijesti najlakše je omogućeno korištenjem HTML5 i potrebnim atributom. Stil korisničkog opisa u ovom slučaju je potreban kako bi korisnik razumio slijed radnji. Primjerice, nakon unosa adrese e-pošte, postavite kvačicu u okvir: "Slažem se primati vijesti tvrtke putem e-pošte." U nastavku je primjer koda obrasca.
Napisati takav kôd u HTML Bootstrap Tooltip neće biti poseban zadatak. Ali koristi od toga su značajne. Sada potrošači znaju sve vijesti tvrtke. Ovo je neka vrsta besplatnog oglašavanja.

Velike pogreške pri stvaranju savjeta za popup

Što učiniti ako Bootstrap Tooltip ne radi? Prva i glavna pogreška u kojoj stilski atribut neće raditi - ovaj alat nije uključen. Da biste je aktivirali, morate koristiti poseban kod.
Ova metoda vam omogućuje da inicijalizirate apsolutno sve opise na web stranici. Druga uobičajena pogreška je odsutnost jQuery zaglavlja.
Za ispravan rad, veza je preduvjet - funkcija obrade podataka kao što je "Javascript skripta" mora biti specificirana.

Svojstva opisa alata

Komponenta Tooltip je u osnovi dizajnirana za prikaz upita kada lebdi pokazivač miša na jednom ili drugom dijelu stranice. No, osim postavljanja tooltipa u desno, lijevo i vrh pomoću data-toggle = "tooltip", tooltip ima sljedeća svojstva:
  • Aktivno. Korištenje pravih Bootstrap Tooltip svojstava omogućuje prikaz upita, zauzvrat, biti lažniza isto svojstvo znači zabranu prikazivanja upita.
  • AutoPopDelay je vrijeme kada se kartice prikazuju.
  • ​​
  • AutoPopDelay. To je vrijeme za koje se pokazivač miša treba postaviti na element tako da se pojavi upit.
  • IsBalone. Ako je vrijednost alata HTML Bootstrap Tooltip vrijednost istinita, tada će prozor alata izgledati kao oblak.
  • ToolTipIcon. To je simbol koji se pojavljuje u opisu alata.
  • Tooltipster

    Kako bi, primjerice, stvorio sjajne opise alata, stranica stvorena na Wordpressu ne mora nužno savršeno poznavati jezik web programera. Dovoljno je znati o postojanju takvog dodatka (proširenja) kao Tooltipster. Iz naslova je jasno da se ovaj dodatak temelji na Tooltipu i njegovim svojstvima i svrsi je iznenađujuće sličan. Zašto mi je potreban ovaj dodatak? To vam omogućuje da stvorite potrebne HTML oznake unutar tooltip.
    Rad dodatka temelji se na umetanju kratkih filmova po stranici. Ona sadrži sve glavne atribute HTML Bootstrap Tooltip: sadržaj (data-tooltip-sadržaj), naslov, položaj, okidač, itd. To vam omogućuje da promijenite temu, font, savjet veličine, boja, ugraditi sliku i još mnogo toga.

    Povezane publikacije