Bootstrap Tooltip: skapa verktygstips
Hur gör din webbplats attraktiv förbesökare? Denna fråga bekymrar nästan alla ägare av internetresurser: handlare, bloggare, små och stora företagare, resenärer och bara kreativa människor som har något att berätta för världen.
Varför ska webbplatsen vara vacker och funktionell?
Antalet besök beror på ämnet på webbplatsen ochdess målgrupp, människors intresse för en viss produkt, investeringar, marknadsföring, fyllbarhet och många andra faktorer. Men det kan inte nekas att webbplatsen "möter på kläder". Det är den första och huvudsidan av resursen som är hans ansikte, visitkortet som besökaren ska förstå om han vill spendera sin tid på att ytterligare titta på innehållet.
Och det finns ingen rätt att göra ett misstag! Enligt forskningen från ett av USA: s tekniska universitet är det första intrycket av webbplatsen besökarens utseende på mindre än en sekund. I genomsnitt skannar en person platsen på 3 sekunder. Blixtfart, är det inte?
Från vad huvudsidan ser ut, beror det på detupp till 70% av resurssuccesen. Det första som folk uppmärksammar är logotypen och den andra är navigering. Och om logotypen är mer eller mindre klar är det värt att bryta huvudet över navigeringen, menyn och bekvämligheten för webbplatsens ergonomi. Det finns en rimlig fråga: "Hur man dekorerar din webbplats gör den så funktionell och bekväm som möjligt, men vacker?" Det finns många ovanliga idéer som kan erbjudas, men en av de mest intressanta är popuptips.
Vad är verktygstipsen? Förutom att vara en utmärkt mekanism för att förbättra webbplatsens funktionalitet, är verktygstips ett verktyg som låter en användare sväva över en ikon, ett ord eller en bild för att se en förklaring av en bild.
Verktyg för att arbeta med verktygstips
Bootstrap kan användas för att skapa ett verktygstips. Det här är en lättläst uppsättning mallar för att skapa applikationer och webbplatser skrivna i HTML, CSS, Sass och JavaScript.
Om du anger, används en av de grafiska elementen i Bootstrap - Tooltip-mallen för verktygstipsen.
Bootstrap-ramen skapades för "Twitter" ochkallades ursprungligen "Twitter Blint". Efter några förändringar under 2012 fick han ett rutnät med 12 kolumner, blev adaptiv och förvärvade det välkända namnet - Tooltip. Ett verktygstips är ett element som dyker upp när du sveper över ett visst objekt på bildskärmen.
Skapa ett kort
Du kan skapa en snabbprotokoll för Bootstrap närhjälp med datatribut, och även genom att aktivera Java Java Script-element. Det finns två huvudsakliga sätt att skapa en HTML Bootstrap Tooltip. Kärnan i den första är användningen av attributet data-switch = "tooltip" och attributet titel, som innehåller hjälptexten. Verktygstipset kommer att dyka upp från början (standardinställning). Det är värt att komma ihåg att hinten behöver initialisering, eftersom automatisk initiering avbryts i "Twitter bootstrap" av anledning av prestationsökning.
För att initiera frågorna,speciell JavaScript används, där alla element som har data-toggle = "tooltip" -attributet, återställs verktygstipsmetoden. Kärnan i den andra metoden är att aktivera java script genom att använda jQuery biblioteket verktyg genom att skriva en verktygsklass som innehåller en ledtråd. Metoden liknar den första, med undantag för metoden för att välja elementen. Inkludera tips i "Java Script" på det sätt som visas nedan.
Exempel på verktygetips för bootstrap
Det finns fyra grundläggande alternativ för placering av verktygstips: på vänster och höger kanter, och även på toppen och botten av elementet.
Tips från toppen
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 texten från ett främmande språk i texten. Tips kan också användas som ett verktyg som hjälper användaren att förstå betydelsen av knapparna på panelen när de svävar över dem. Bootstrap Tooltip mallar används ofta på olika organisationers webbplatser för att skapa abonnemang på företagets nyheter. Detta gör att du kan hålla kunderna informerade och ger också besökare möjlighet att ta emot ny information, till exempel mängder rabatter, erbjudanden, förändringar inom företaget.
Tänk på ett exempel där användaren behöverskriv in din e-postadress för att prenumerera på nyhetsbrevet. Uppgiften att tillhandahålla en kundgrupps prenumeration på nyheter uppnås lättast genom att använda HTML5 och det obligatoriska attributet. Verktygstipset i detta fall behövs för att användaren ska kunna förstå åtgärdssekvensen. Till exempel, efter att ha skrivit in e-postadressen, markerade jag rutan: "Jag godkänner att få företagets nyheter via e-post". Nedan är ett exempel på formulärkoden.
För att ange en sådan kod i HTML Bootstrap Tooltip gör inget speciellt arbete. Men fördelarna med det är betydande. Nu känner konsumenterna alla nyheter om företaget. Det här är en slags gratis reklam.
Grundläggande fel vid skapandet av verktygstips
Vad ska jag göra om Bootstrap Tooltip inte fungerar? Det första och huvudfelet, där verktygetipsetributet inte fungerar, är verktygstipset inte med. För att aktivera det måste du använda en särskild kod.
Med den här metoden kan du initiera alla verktygstips på webbsidan.
Det andra vanliga misstaget är bristen på jQuery i rubriken.
För länkets kompetenta arbete finns ett nödvändigt villkor - databehandlingsfunktionen som "Java Script" ska anges.
Verktygstipsegenskaper
Kärnan är Tooltip-komponenten avsedd förVisa tips när du håller muspekaren över ett avsnitt på sidan. Men förutom placering av ledtråd till höger, vänster och övre med data-switch = "tooltip", har verktygstipset dessa egenskaper:
- Active. Med hjälp av de sanna egenskaperna i Bootstrap Tooltip kan du visa tips, i sin tur betyder värdet falskt för samma egendom att du inte kan visa tips.
- AutoPopDelay är den tid då prompts visas.
- AutoPopDelay. Detta är den tidsperiod under vilken muspekaren ska pekas på elementet, så att ett verktygstips visas.
- IsBaloon. Om värdet på HTML Bootstrap Tooltip är sant, så visas snabbfältet som ett moln.
- ToolTipIcon. Det är en symbol som visas i snabbfönstret.
För att skapa vackra popup-fönstertips, till exempel på en sida skapad på Wordpress, är det inte nödvändigt att noggrant förstå språket för webbutvecklare. Det är tillräckligt att veta om förekomsten av en sådan plugin (extension), som Tooltipster. Från titeln är det tydligt att denna plugin är baserad på Tooltip och dess egenskaper och syftet är överraskande lik det. Vad är det här plugin för? Det låter dig skapa den nödvändiga HTML-märkningen inuti hinten.
Pluginets arbete är baserat på införandet av genvägar påsida. Innehåller alla grundläggande attribut i HTML Bootstrap Tooltip: innehåll (data-tooltip-innehåll), titel, position, trigger etc. Med det här kan du ändra tema, typsnitt, storlek på verktygstips, färg, inbädda bild och mycket mer.
