Bootstrap Tooltip: creați un sfat util

Cum puteți face site-ul dvs. atractiv pentru vizitatori? Această întrebare deranjează aproape toți proprietarii de resurse Internet: comercianti, bloggeri, proprietarii de afaceri mici și mari, călătorii și oameni creativi care au ceva de spus lumii.

De ce ar trebui site-ul să fie frumos și funcțional?

Numărul de vizite depinde de tema site-ului și de publicul vizat, de interesul oamenilor față de un anumit produs, de investiții, de promovare, de posibilitatea de plată și de alți factori. Dar nu poate fi negat că site-ul "se întâlnește pe haine". Este prima și pagina principală a resursei care este fața lui, cartea de vizită pe care vizitatorul ar trebui să înțeleagă dacă dorește să-și petreacă timpul cu privire la vizionarea ulterioară a conținutului.

Și nu există nici un drept să faci o greșeală! Potrivit cercetării uneia dintre universitățile tehnice din Statele Unite, prima impresie a site-ului este apariția vizitatorului în mai puțin de o secundă. În medie, o persoană "scanează" site-ul în 3 secunde. Viteza de viteză, nu-i așa?

Din ce arată pagina principală, depinde până la 70% din succesul resurselor. Primul lucru pe care oamenii îl acordă este logo-ul, iar al doilea este navigația. Și dacă logo-ul este mai mult sau mai puțin clar, atunci merită să-ți rupeți capul deasupra navigației, meniului și confortul ergonomiei site-ului. Există o întrebare rezonabilă: "Cum să decorați site-ul dvs., să îl faceți cât mai funcțional și mai convenabil, dar frumos?" Există o mulțime de idei neobișnuite care pot fi oferite, dar unul dintre cele mai interesante este sfaturile pop-up.

Care sunt instrumentele? În plus, acesta este un instrument excelent pentru a îmbunătăți funcționalitatea site-ului, ponturile - un instrument care permite utilizatorului să treceți cursorul peste o pictogramă, un cuvânt sau o imagine pentru a vedea o explicație pentru o anumită imagine.

Unelte pentru lucrul cu sfaturi

Bootstrap poate fi folosit pentru a crea o sugestie. Acesta este un set de șabloane ușor de învățat pentru crearea de aplicații și site-uri scrise în HTML, CSS, Sass și jаvascript.

Dacă specificați, atunci pentru instrumentele de lucru se utilizează unul dintre elementele grafice ale șablonului Bootstrap - Tooltip.

Cadrul Bootstrap a fost creat pentru "Twitter" și a fost denumit inițial "Twitter Blint". După câteva schimbări în 2012, a primit o grilă de 12 coloane, a devenit adaptabilă și a obținut numele familiar - Tooltip. Un buton este un element care apare când plasați cursorul peste un anumit element de pe ecranul monitorului.

Creați o cartelă

Aveți posibilitatea să creați un prompt de tip Bootstrap Tooltip utilizând atributele de date sau activând elementele Java Java Script. Există două modalități principale de a crea o sugestie HTML pentru Bootstrap. Esența primei este folosirea atributului data-toggle = "tooltip" și atributul title, care va conține textul de ajutor. Bara de instrumente va apărea din partea de sus (setarea implicită). Merită să ne amintim că sugestia are nevoie de inițializare, deoarece inițializarea automată este anulată în "bootstrap Twitter" din motive de creștere a performanței.

Pentru a iniția prompte, utilizați un jаvascript special, în care toate elementele care au atributul de date de comutare = „tooltip“, metoda tooltip de recuperare. Esența celei de-a doua metode este să activați scriptul java utilizând instrumentul bibliotecii jQuery scriind o clasă de instrumente care include un indiciu. Metoda este similară cu prima, cu excepția metodei de selectare a elementelor. Includeți sfaturi în "Java Script" în modul prezentat mai jos.

Exemplu de sfat utilitar pentru bootstrap

Există patru opțiuni de bază pentru localizarea vârfurilor de instrumente: pe marginea din stânga și din dreapta, precum și pe partea superioară și inferioară a elementului.

Sugestie din partea de sus

Bara de instrumente spre dreapta

Sugestie în partea de jos

Bara de instrumente din stânga

Aplicarea sfaturilor de aplicație

Există multe utilizări ale indicației Bootstrap. Puteți introduce instrucțiuni astfel încât utilizatorul să înțeleagă traducerea textului dintr-o limbă străină în text. De asemenea, sugestiile pot fi folosite ca un instrument care va ajuta utilizatorul să înțeleagă sensul butoanelor de pe panou atunci când se deplasează peste ele. Șabloanele Bootstrap Tooltip sunt adesea folosite pe site-urile diferitelor organizații pentru a crea un abonament la știrile companiei. Acest lucru vă permite să păstrați clienții în cunoștință de cauză și oferă vizitatorilor posibilitatea de a primi informații noi, cum ar fi sumele de reduceri, oferte și schimbări în cadrul companiei.

Luați în considerare un exemplu în care utilizatorul trebuie să introducă adresa sa de e-mail pentru a vă abona la newsletter. Sarcina de a oferi un abonament pentru publicul pentru clienți este foarte ușor de atins prin utilizarea HTML5 și atributul necesar. Instrumentul în acest caz este necesar pentru ca utilizatorul să înțeleagă succesiunea acțiunilor. De exemplu, după ce am introdus adresa de e-mail, am bifat caseta: "Sunt de acord să primesc știrile companiei prin e-mail". Mai jos este un exemplu de cod de formular.

Pentru a introduce un astfel de cod în HTML Bootstrap Tooltip nu face munca specială. Dar beneficiul este considerabil. Acum, consumatorii cunosc toate știrile companiei. Acesta este un fel de publicitate gratuită.

Erori de bază la crearea tipurilor de instrumente

Ce ar trebui să fac dacă Bootstrap Tooltip nu funcționează? Prima eroare și cea mai importantă, în care atributul de tip tooltip nu va funcționa, este că instrumentul nu este inclus. Pentru ao activa, trebuie să utilizați un cod special.

Această metodă vă permite să inițializați toate instrumentele de pe pagina web.

A doua greșeală obișnuită este lipsa jQuery în antet.

Pentru o activitate competentă a legăturii există o condiție necesară - trebuie specificată funcția de prelucrare a datelor ca "Java Script".

Tooltip Proprietăți

În centrul său, componenta Tooltip este proiectată să afișeze sugestii când plasați mouse-ul peste o secțiune a paginii. Dar, în afară de localizarea indicelui la dreapta, la stânga și la vârf cu data-switch = "tooltip", tooltip-ul are următoarele proprietăți:

• Activ. Utilizând proprietățile reale din Bootstrap Tooltip vă permite să afișați sugestii, la rândul lor, valoarea falsă pentru aceeași proprietate înseamnă că nu puteți afișa sugestii.
• AutoPopDelay este ora la care sunt afișate instrucțiunile.
• AutoPopDelay. Aceasta este perioada de timp în care cursorul mouse-ului ar trebui să fie îndreptat către elementul respectiv, astfel încât să apară un indicator.
• IsBaloon. Dacă valoarea cuvântului HTML Bootstrap Tooltip este adevărată, atunci caseta de prompt va arăta ca un nor.
• ToolTipIcon. Este un simbol care apare în fereastra de prompt.

Tooltipster

Pentru a crea sugestii perfecte, de exemplu, pe un site creat pe WordPress, nu este necesar să înțelegeți bine limba dezvoltatorilor web. Este suficient să știți despre existența unui astfel de plug-in (extensie), ca Tooltipster. Din titlu, este clar că acest plug-in se bazează pe Tooltip, iar proprietățile și scopul său sunt surprinzător de asemănătoare cu acesta. Pentru ce este acest plugin? Acesta vă permite să creați marcajul HTML necesar în interiorul sugestii.

Lucrul pluginului se bazează pe introducerea scurtăturilor în pagină. Conține toate atributele esențiale ale HTML Bootstrap Tooltip :. continut (date-tooltip-conținut), titlu, poziție, de declanșare, etc. Acest lucru vă permite să schimbați tema, fontul, dimensiunea de sfaturi, de culoare, insera imagini și multe altele.