Hur gör du din webbplats attraktiv för besökare? Den här frågan oroar nästan alla ägare av internetresurser: handlare, bloggare, ägare till små och stora företag, resenärer och helt enkelt kreativa människor som har något att berätta för världen.
Varför ska en webbplats vara vacker och funktionell?
Antalet besök beror på temat för webbplatsen och dess målgrupp, människors intresse för en viss produkt, investeringar, marknadsföring, innehåll och många andra faktorer. Men det går inte att förneka att sajten "hälsas av kläder". Det är resursens första och huvudsida som är dess ansikte utåt, visitkortet, med vilket besökaren måste förstå om han vill lägga sin tid på ytterligare visning av innehållet.
Och det finns inget utrymme för misstag! Enligt forskning från ett av de tekniska universiteten i USA får besökaren det första intrycket av sajten på mindre än en sekund. I genomsnitt "skannar" en person en webbplats på 3 sekunder. Blixtsnabb, eller hur?!
Upp till 70 % av resursens framgång beror på hur huvudsidan ser ut. Det första folk lägger märke till ärlogotyp, men den andra är navigering. Och om allt är mer eller mindre tydligt med logotypen, är det värt att bryta huvudet över navigeringen, menyn och bekvämligheten med webbplatsens ergonomi. En rimlig fråga uppstår: "Hur man dekorerar din webbplats, gör den så funktionell och bekväm som möjligt, men samtidigt vacker?" Det finns många ovanliga idéer att erbjuda, men en av de mest intressanta är verktygstips.
Vad är verktygstips? Förutom att vara en utmärkt mekanism för att förbättra webbplatsens funktionalitet, är verktygstips ett verktyg som låter användaren se en förklaring till en viss bild när han håller muspekaren över en ikon, ett ord eller en bild.
Verktyg för att arbeta med verktygstips
Bootstrap är det bästa verktyget för att skapa verktygstips. Det är en uppsättning mallar som är lätt att lära sig för att bygga appar och webbplatser skrivna i HTML, CSS, Sass och JavaScript.
För att vara specifik använder verktygstips ett av de grafiska elementen i Bootstrap-mallen - Verktygstips.
Bootstrap-ramverket skapades för "Twitter" och hette ursprungligen "Twitter Blueprint". Efter några förändringar 2012 fick den ett rutnät med 12 kolumner, blev adaptiv och fick det välbekanta namnet - Tooltip. Ett verktygstips är ett element som dyker upp när du håller muspekaren över ett specifikt element på skärmen.
Skapa ett tips
Du kan skapa ett Bootstrap-verktygstips med hjälp av attributdata, samt genom att aktivera "Java Script"-elementen. Det finns två huvudsakliga sätt att skapa ett HTML Bootstrap Tooltip. Kärnan i den första är att tillämpa attributet och attributtiteln (titel), som kommer att innehålla tipstexten. Verktygstipset dyker upp längst upp (standardinställning). Det är värt att komma ihåg att verktygstipset måste initieras, eftersom automatisk initiering har föråldrats i "Twitter bootstrap" av prestandaskäl.
För att initiera verktygstips används speciell JavaScript, där verktygstipsmetoden återställs för alla element som har ett attribut. Kärnan i den andra metoden är att aktivera ett verktygstips med hjälp av "JavaScript"-koden med deltagande av jQuery-biblioteket genom att skriva en verktygsklass som innehåller ett verktygstips. Metoden liknar den första, förutom elementvalsmetoden. Du kan aktivera tips i "Java Script" på det sätt som visas nedan.
Exempel på Bootstrap-verktygstips
Det finns fyra huvud alternativ för att placera verktygstips: på vänster och höger kant, och ovanför och under elementet.
Tips från ovan
Hint rätt
Tips längst ner
Hint left
Använda verktygstips
Det finns många användningsområden för Bootstrap Tooltip. Du kan infoga verktygstips så att användaren kan förstå översättningen av text från ett främmande språk i texten. Verktygstips kan också användas som ett verktyg för att hjälpa användaren att förstå innebörden av knapparna på panelen när man håller muspekaren över dem. Bootstrap Tooltip-mallar används ofta på olika organisationers webbplatser för att skapa en prenumeration på företagsnyheter. Detta håller kunderna uppdaterade och gör det också möjligt för besökare att få ny information, såsom rabatter, erbjudanden, förändringar inom företaget.
Tänk på ett exempel där en användare måste ange sin e-postadress för att prenumerera på ett nyhetsbrev. Uppgiften att säkerställa att kundpubliken prenumererar på nyheter uppnås enklast med HTML5 och det nödvändiga attributet. Verktygstipset i detta fall behövs för att användaren ska förstå sekvensen av åtgärder. Till exempel, efter att ha angett e-postadressen, markerade jag rutan: "Jag accepterar att ta emot företagsnyheter till min e-postadress." Nedan är ett exempel på formulärkoden.
Det är enkelt att installera den här koden i HTML Bootstrap Tooltip. Men fördelarna är betydande. Nu vet konsumenterna alla nyheter om företaget. Det här är en sorts gratis reklam.
Huvudfel när du skapar popup-fönstertips
Vad ska jag göra om Bootstrap Tooltip inte fungerar? Det första och största misstaget där verktygstipsattributet inte fungerar är om verktygstipset inte är aktiverat. För att aktivera det måste du använda en speciell kod.
Med den här metoden kan du initiera absolut alla verktygstips på en webbsida.
Det andra vanliga misstaget är att inte ha jQuery i rubriken.
Det finns ett nödvändigt villkor för att länken ska fungera korrekt - en databehandlingsfunktion som "Java Script" måste anges.
Verktygstipsegenskaper
I kärnan är Verktygstips-komponenten utformad för att visa verktygstips när du flyttar muspekaren över en eller annan del av sidan. Men förutom platsen för verktygstipset till höger, vänster och överst med hjälp, har verktygstipset följande egenskaper:
- Aktiv. Genom att använda den sanna egenskapen i Bootstrap Tooltip kan verktygstips visas, medan om du ställer in samma egenskap till false kan inga verktygstips visas.
- AutoPopDelay är den tidpunkt då tips visas.
- AutoPopDelay. Representerar hur lång tid muspekaren måste sväva över ett element för att verktygstipset ska visas.
- IsBaloon. Om värdet på HTML Bootstrap Tooltip-verktygstipset är sant kommer verktygstipset att ändras till ett moln.
- ToolTipIcon. Representerar tecknet som visas i fönstrettips.
Tooltipster
För att skapa vackra verktygstips, till exempel på en webbplats skapad på Wordpress, är det inte nödvändigt att känna till webbutvecklares språk ordentligt. Det räcker att veta om existensen av ett sådant plugin (tillägg) som Tooltipster. Av namnet är det tydligt att denna plugin är baserad på Tooltip och är förvånansvärt lik den i sina egenskaper och syfte. Vad är detta plugin till för? Det låter dig skapa den nödvändiga HTML-uppmärkningen i verktygstipset.
Insticksprogrammets arbete är baserat på införandet av genvägar på sidan. Innehåller alla grundläggande HTML Bootstrap Tooltip-attribut: innehåll (data-tooltip-content), titel, position, trigger, etc. Detta låter dig ändra tema, teckensnitt, verktygstipsstorlek, färg, infoga en bild och mer.
