Bootstrap Tooltip: izradite opis alata

Kako izraditi vašu web lokaciju privlačnom posjetiteljima? Ovo pitanje brine gotovo sve vlasnike internetskih resursa: trgovci, blogeri, mali i veliki poduzetnici, putnici i samo kreativni ljudi koji imaju nešto za reći svijetu.

Zašto bi site bio lijep i funkcionalan?

Broj posjeta ovisi o temi stranice i svoje ciljne publike, interes ljudi u određenom proizvodu, investicija, povucite, gustoće naseljenosti i mnogim drugim čimbenicima. No, ne može se zanijekati da se stranica "sastaje na odjeći". To je prvi i glavni resurs stranica se njegovo lice, posjetnica, na kojem posjetitelj treba razumjeti, ako želi trošiti vrijeme na daljnje sadržaja gledanja.

I nema pravo napraviti pogrešku! Prema istraživanju jednog od tehničkih sveučilišta u Sjedinjenim Državama, prvi dojam stranice je izgled posjetitelja za manje od sekunde. U prosjeku, osoba "skenira" web mjesto u roku od 3 sekunde. Brzina munje, zar ne ?!

Od onoga što izgleda glavna stranica, ovisi do 70% uspjeha resursa. Prva stvar koju ljudi obraćaju pozornost je logotip, a drugi je navigacija. A ako je logotip više ili manje jasan, vrijedi razbiti glavu iznad navigacije, izbornika i praktičnosti ergonomije web mjesta. Postoji razumno pitanje: "Kako ukrasiti vašu web-lokaciju, učiniti je funkcionalnim i prikladnima što je više moguće, ali lijepo?" Postoji mnogo neobičnih ideja koje se mogu ponuditi, no jedna od najzanimljivijih je pop-up savjeta.

Koji su opis alata? Uz to je odličan alat za poboljšanje funkcionalnosti stranice, opise - alat koji omogućuje korisniku da Zadržite pokazivač iznad ikone, riječ ili sliku kako bi vidjeli objašnjenje za određenu sliku.

Alati za rad s opisima alata

Bootstrap se može koristiti za izradu alata. Ovo je jednostavan za učenje skup predložaka za izradu aplikacija i web mjesta napisanih u HTML, CSS, Sass i jаvascript.

Ako navedete, za alatne tipke koristi se jedan od grafičkih elemenata Bootstrap - Tooltip predloška.

Bootstrap okvir je izrađen za "Twitter" i izvorno se zove "Twitter Blint". Nakon nekih promjena u 2012, on je dobio rešetku od 12 stupaca, postao prilagodljiv i stekao poznato ime - Tooltip. Alatni je element koji se pojavljuje kada pokazivač miša iznad određene stavke na zaslonu monitora.

Izradite karticu

Možete stvoriti prompt Bootstrap Tooltip pomoću atributa podataka ili aktiviranjem Java Java Script elemenata. Postoje dva glavna načina za izradu HTML Bootstrap Tooltip. Bit prve je upotreba atributa data-toggle = "tooltip" i atributa naslova, koji će sadržavati tekst pomoći. Alatna će se opcija pojaviti s vrha (zadana postavka). Važno je imati na umu da vam je potrebna inicijalizacija, budući da je automatska inicijalizacija otkazana u "Twitter bootstrapu" zbog povećanja performansi.

Da bi se pokrenuo brz, koristiti posebne jаvascript, u ​​kojoj su svi elementi koji imaju atribut podataka prebacivanje = „Tooltip”, tooltip oporavlja metodu. Bit druge metode je aktiviranje Java skripte pomoću alata jQuery knjižnice pisanjem klase alata koji uključuje savjet. Metoda je slična prvoj, osim metode odabira elemenata. Uključite savjete u "Java Script" na način prikazan u nastavku.

Primjer alata za pokretanje

Postoje četiri osnovne opcije za lokaciju opisa: na lijevim i desnim rubovima, kao i na vrhu i dnu elementa.

Savjet s vrha

Tip desne strane

Savjet na dnu

Tip opisa s lijeve strane

Primjena opcija

Postoje mnoge upotrebe alatne trake Bootstrap. Možete umetnuti opise tipki tako da korisnik može razumjeti prijevod teksta s stranog jezika u tekstu. Isto tako, savjeti se mogu koristiti kao alat koji će korisnicima pomoći pri razumijevanju značenja gumba na ploči tijekom lebdeći iznad njih. Predlošci Tooltip za Bootstrap često se koriste na web stranicama različitih organizacija kako bi stvorili pretplatu na vijesti tvrtke. To vam omogućuje informiranje klijenata, kao i mogućnost da posjetitelji primaju nove informacije, kao što su količine popusta, ponuda i promjena unutar tvrtke.

Razmislite o primjeru koji korisnik treba unijeti svoju adresu e-pošte kako bi se pretplatili na newsletter. Zadatak pružanja pretplate klijentske publike za vijesti najlakše se postiže pomoću HTML5 i potrebnog atributa. U ovom je slučaju alatna točka potrebna kako bi korisnik razumio slijed akcija. Na primjer, nakon unosa adrese e-pošte, označili smo okvir "Slažem se da primim vijesti tvrtke e-poštom". Ispod je primjer koda obrasca.

Za unos takvog koda u HTML Bootstrap Tooltip ne čini poseban posao. No, koristi od toga je znatna. Sada potrošači znaju sve vijesti o tvrtki. Ovo je vrsta besplatnog oglašavanja.

Osnovne pogreške prilikom izrade alata

Što trebam učiniti ako tipka Bootstrap Tooltip ne radi? Prva i glavna pogreška, u kojoj atribut atributa neće funkcionirati, alatna tipka nije uključena. Da biste ga aktivirali, morate upotrijebiti poseban kod.

Ova metoda omogućuje vam inicijalizaciju svih alata na web stranici.

Druga uobičajena pogreška je nedostatak jQuerya u zaglavlju.

Za kompetentan rad veze postoji potreban uvjet - treba odrediti funkciju obrade podataka kao što je "Java Script".

Alatne tipke

U svojoj jezgri, komponenta Tooltip osmišljena je za prikaz savjeta kada držite miš iznad dijela stranice. No, osim položaja savjete na desnoj strani, lijevo i gore pomoću podataka prebacivanje = „tooltip”, naziv alata ima sljedeća svojstva:

• Aktivan. Pomoću istinitih svojstava u programu Bootstrap Tooltip možete prikazati savjete, zauzvrat, vrijednost koja je lažna za isti entitet znači da ne možete prikazati savjete.
• AutoPopDelay je vrijeme kada se prikazuju upiti.
• AutoPopDelay. Ovo je razdoblje tijekom kojeg se pokazivač miša treba usmjeriti na element, tako da se pojavi opis alata.
• IsBaloon. Ako je vrijednost HTML Bootstrap Tooltip istina, potvrdni okvir izgledat će kao oblak.
• ToolTipIcon. To je simbol koji se pojavljuje u brzom prozoru.

Tooltipster

Da biste stvorili savršene opise, primjerice, na web mjestu stvorenom na WordPressu, nije potrebno temeljito razumjeti jezik web razvojnih programera. Dovoljno je znati o postojanju takvog dodataka, kao što je Tooltipster. Iz naslova je jasno da se ovaj dodatak temelji na Tooltip-u i po svojim svojstvima i svrsi iznenađujuće je sličan. Što je ovaj dodatak? Omogućuje vam da stvorite potrebnu HTML oznaku unutar nagovještaja.

Rad dodatka temelji se na umetanju prečaca na stranicu. Sadrži sve bitne atribute HTML bootstrap Opis za :. sadržaj (podaci-opis-sadržaj), naslov, položaj, okidač, itd To vam omogućuje da promijenite temu, font, veličinu savjete, boje, umetnuti sliku, i još mnogo toga.