Bootstrap Tooltip: Vytvořte popisky

Jak vytvořit atraktivní stránky pro návštěvníky? Tato otázka trápí téměř všechny vlastníky internetových zdrojů: obchodníci, bloggerů, majitelům malých a velkých podniků, cestovatele a kreativních lidí, kteří mají co říct světu.

Proč by měl být web krásný a funkční?

Počet návštěv závisí na tématu webu a jeho cílovém publiku, zájmů lidí o určitý produkt, investicích, propagaci, plnění a mnoha dalších faktorech. Nemůže však být popřeno, že se stránka "setkává na oblečení". Je to první a hlavní stránka zdroje, která je jeho tváří, vizitkou, na které by měl návštěvník pochopit, zda chce věnovat svůj čas dalšímu prohlížení obsahu.

A není právo udělat chybu! Podle průzkumu jedné z technických univerzit Spojených států je prvním dojmem místa návštěva návštěvníka za méně než vteřinu. V průměru osoba "naskenuje" místo za 3 sekundy. Rychlost blesku, ne?

Z čeho vypadá hlavní stránka, závisí až 70% úspěchu zdroje. První věc, kterou lidé věnují pozornost, je logo a druhá je navigace. A pokud je logo více či méně jasné, stojí za to rozbití hlavy nad navigací, menu a pohodlí ergonomie webu. Existuje rozumná otázka: "Jak zdobit vaše stránky, učinit to jako funkční a pohodlné, jak je to možné, ale krásné?" Existuje mnoho neobvyklých nápadů, které lze nabídnout, ale jedním z nejzajímavějších tipů jsou pop-up tipy.

Jaké jsou tipy? Navíc se jedná o vynikající nástroj pro zlepšení funkčnosti webu, bubliny - nástroj, který umožňuje uživateli pohybovat kurzorem nad ikonu, slovo nebo obraz vidět vysvětlení konkrétního obrazu.

Nástroje pro práci s popisy nástrojů

Bootstrap lze použít k vytvoření popisku. Jedná se o snadno srozumitelnou sadu šablon pro vytváření aplikací a stránek napsaných v jazycích HTML, CSS, Sass a jаvascript.

Pokud zadáte, použije se pro popisky jeden z grafických prvků šablony Bootstrap - Tooltip.

Bootstrap rámec byl vytvořen pro "Twitter" a původně byl nazván "Twitter Blint". Po několika změnách v roce 2012 obdržel mřížku 12 sloupců, stal se adaptivní a získal známé jméno - Tooltip. Nástrojový popis je prvek, který se objeví, když umístíte ukazatel myši nad určitou položku na obrazovce monitoru.

Vytvořte kartu

Bootstrap Tooltip můžete vytvořit pomocí datových atributů nebo aktivací prvků Java Java Script. Existují dva hlavní způsoby, jak vytvořit popis jazyka Bootstrap HTML. Podstatou prvního je použití atributu data-toggle = "tooltip" a atribut title, který bude obsahovat text nápovědy. Z vrcholu se zobrazí popisek (výchozí nastavení). Stojí za to pamatovat, že nápověda potřebuje inicializaci, protože automatické inicializace je zrušena v "Twitter bootstrap" z důvodů zvýšení výkonu.

S cílem zahájit prompt, použijte speciální jаvascript, v níž jsou všechny prvky, které mají atribut datový přepínač = „tooltip“, popisku zotavuje metodu. Podstata druhý proces snižuje aktivaci podle kódu „dzhavaskripte“ popisku zahrnující jQuery knihovnu psaním třídu nářadí, které tvoří narážku. Metoda je podobná jako první, s výjimkou metody výběru prvků. Zahrnout tipy v "Java Script" způsobem uvedeným níže.

Příklad popisku spouštěcího prvku

K dispozici jsou čtyři základní možnosti pro umístění nápověd: na levém a pravém okraji a také na horní a dolní části prvku.

Tip od vrcholu

Nápověda napravo

Pokyn v dolní části stránky

Popisek na levé straně

Použití nápověd

Existuje mnoho použití Bootstrap Tooltip. Můžete vložit popisky tak, aby uživatel pochopil překlad textu z cizího jazyka do textu. Tipy mohou být také použity jako nástroj, který uživateli pomůže pochopit význam tlačítek na panelu při pohybu nad nimi. Bootstrap Tooltip šablony se často používají na webových stránkách různých organizací k vytvoření odběru novinek společnosti. To vám umožňuje informovat zákazníky a také poskytuje návštěvníkům příležitost získat nové informace, jako například výši slev, nabídek a změn v rámci společnosti.

Zvažte příklad, kdy uživatel potřebuje zadat svou e-mailovou adresu, aby se mohl přihlásit k odběru zpravodaje. Úkolem poskytnutí odběru novinek pro zákazníky je nejsnadněji dosaženo pomocí HTML5 a požadovaného atributu. Nápověda v tomto případě je potřebná, aby uživatel pochopil postup činností. Například po zadání e-mailové adresy jsem zaškrtnul políčko: "Souhlasím s tím, že obdržím zprávy společnosti e-mailem". Níže je uveden příklad kódu formuláře.

Zadání takového kódu do jazyka HTML Bootstrap Tooltip nevytváří zvláštní práci. Ale přínos z toho je značný. Spotřebitelé nyní vědí všechny zprávy o společnosti. Jedná se o bezplatnou reklamu.

Základní chyby při vytváření popisků

Co mám dělat, když nástroj Bootstrap Tooltip nefunguje? První a hlavní chyba, v níž atribut tooltip nefunguje, není popiska součástí. Chcete-li jej aktivovat, musíte použít speciální kód.

Tato metoda umožňuje inicializovat všechny popisky na webové stránce.

Druhou častou chybou je nedostatek jQuery v hlavičce.

Pro kompetentní práci linky je nutná podmínka - je třeba zadat funkci zpracování dat jako "Java Script".

Vlastnosti popisku

Ve své podstatě je součást Tooltip navržena tak, aby zobrazovala rady, když umístíte ukazatel myši nad část stránky. Kromě umístění nápovědy vpravo, vlevo a v horní části s přepínačem data = "tooltip" má nástrojový popis tyto vlastnosti:

• Aktivní. Použití pravých vlastností v Bootstrap Tooltip vám umožňuje zobrazit nápovědy, naopak hodnota false pro stejnou vlastnost znamená, že nemůžete zobrazit tipy.
• AutoPopDelay je čas, kdy se zobrazují výzvy.
• AutoPopDelay. Toto je časové období, během kterého má být kurzor myši ukázán na prvek, takže se objeví popiska.
• IsBaloon. Pokud je hodnota popisku Bootstrap HTML pravdivá, zobrazí se okno výzvy jako mrak.
• ToolTipIcon. Je to symbol, který se zobrazí v okně výzvy.

Tooltipster

Za účelem vytvoření perfektních nástrojů, například na webu vytvořeném na WordPress, není nutné důkladně pochopit jazyk webových vývojářů. Stačí, abyste věděli o existenci takového plug-inu (rozšíření), jako je Tooltipster. Z názvu je zřejmé, že tento plug-in je založen na popisku a jeho vlastnosti a účel je překvapivě podobný. K čemu je tento plugin? Umožňuje vytvořit potřebnou značku HTML uvnitř nápovědy.

plug-in je založen na vkládání zkratek na této stránce. Obsahuje všechny základní atributy HTML Bootstrap Bublinová nápověda :. obsahu (dat tooltip-obsah), v názvu, polohy, spoušť, atd To vám umožňuje změnit motiv, písmo, velikost tipy, barvy, vložte disk, a mnoho dalšího.