Bootstrap Подсказка: създайте подсказка

Как да направите сайта си привлекателен за посетителите? Този въпрос тревожи почти всички собственици на интернет ресурси: търговци, блогъри, малки и големи собственици на бизнес, пътници и само творчески хора, които имат нещо да кажат на света.

Защо сайтът да е красив и функционален?

Броят на посещенията зависи от темата на сайта и неговата целева аудитория, от интереса на хората към даден продукт, инвестициите, популяризацията, възможността за попълване и много други фактори. Но не може да се отрече, че сайтът "се среща на дрехи". Това е първата и основна страница на ресурса, която е лицето му, визитната картичка, на която посетителят трябва да разбере дали иска да отдели времето си за по-нататъшно преглеждане на съдържанието.

И няма право да правиш грешка! Според изследването на един от техническите университети на САЩ, първото впечатление от сайта е появата на посетителя за по-малко от секунда. Средно човек "сканира" сайта за 3 секунди. Скоростта на светкавицата, нали?

От това, което изглежда основната страница, зависи до 70% от успеха на ресурса. Първото нещо, на което хората обръщат внимание, е логото, а второто е навигацията. И ако логото е повече или по-малко ясно, значи си струва да разчупите главата си над навигацията, менюто и удобството на ергономичността на сайта. Има разумен въпрос: "Как да украсявате сайта си, да го правите възможно най-функционален и удобен, но красив?" Има много необичайни идеи, които могат да бъдат предложени, но един от най-интересните е съветите за изскачащи прозорци.

Какви са инструкциите? В допълнение към това, че са отличен механизъм за подобряване на функционалността на сайта, tooltips са инструмент, който позволява на потребителя да задържи курсора над икона, дума или картина, за да види обяснение на изображение.

Инструменти за работа с инструменти

Bootstrap може да се използва за създаване на подсказка. Това е лесен за научаване набор от шаблони за създаване на приложения и сайтове, написани в HTML, CSS, Sass и jаvascript.

Ако зададете, тогава за инструментариума се използва един от графичните елементи на шаблона Bootstrap - Tooltip.

Рамката Bootstrap е създадена за "Twitter" и първоначално е наречена "Twitter Blint". След някои промени през 2012 г. той получи мрежа от 12 колони, стана адаптивна и придоби познатото име - Tooltip. Подсказката е елемент, който се появява, когато задържите курсора на мишката върху конкретен елемент на екрана на монитора.

Създайте карта

Можете да създадете подкана на Bootstrap Tooltip, като използвате атрибутите за данни или като активирате елементите Java Java Script. Има два основни начина за създаване на HTML подсказка за подскачане на HTML. Същността на първата е използването на атрибута data-toggle = "tooltip" и атрибута title, който ще съдържа помощния текст. Подсказката ще се появи отгоре (настройка по подразбиране). Струва си да си спомним, че намекът се нуждае от инициализация, тъй като автоматичната инициализация се отменя в "bootstrap на Twitter", за да се увеличи производителността.

За да се инициализират съвети, се използва специален jаvascript, в който за всички елементи, които имат атрибут data-toggle = "tooltip", се възстановява методът на подсказка. Същността на втория метод е да активирате java скрипта, като използвате инструмента jQuery библиотеката, като напишете класа на инструмента, който включва намек. Методът е подобен на първия, с изключение на метода за избор на елементите. Включете съвети в "Java Script" по начина, показан по-долу.

Пример за подсказка за подскачане

Има четири основни опции за местоположението на инструментите: отляво и отдясно, както и отгоре и отдолу на елемента.

Съвет от горе

Подсказка надясно

Съвет в дъното

Подсказка отляво

Прилагане на инструкции

Има много приложения на подсказката на Bootstrap Tooltip. Можете да вмъквате съвети, така че потребителят да може да разбере текста от чужд език. Съветите също могат да се използват като инструмент, който ще помогне на потребителя да разбере значението на бутоните на панела, когато се движи над тях. Шаблоните за Bootstrap Tooltip често се използват в уебсайтовете на различни организации, за да се създаде абонамент за новините на компанията. Това ви позволява да информирате клиентите си и също така предоставя възможност на посетителите да получават нова информация, като сумата на отстъпките, офертите и промените в компанията.

Помислете за пример, в който потребителят трябва да въведе своя имейл адрес, за да се абонира за бюлетина. Задачата за предоставяне на абонамент за аудитория от клиенти се постига най-лесно чрез използването на HTML5 и задължителния атрибут. Подкастът на инструмента в този случай е необходим, за да може потребителят да разбере последователността от действия. Например, след въвеждане на имейл адреса, проверих полето: "Съгласен съм да получавам новините на компанията по електронна поща". По-долу е даден пример за кода на формуляра.

За да въведете такъв код в HTML подсказката на Bootstrap Tooltip не прави специална работа. Но ползата от него е значителна. Сега потребителите знаят цялата новина за компанията. Това е вид безплатна реклама.

Основни грешки при създаването на инструкции

Какво трябва да направя, ако подсказката на Bootstrap Tooltip не работи? Първата и основната грешка, при която атрибутът на инструмента не работи, е, че подсказката не е включена. За да го активирате, трябва да използвате специален код.

Този метод ви позволява да инициализирате всички инструкции на уеб страницата.

Втората често срещана грешка е липсата на jQuery в заглавката.

За компетентната работа на връзката има необходимо условие - трябва да се уточни функцията за обработка на данни като "Java Script".

Свойства на инструмента

В сърцевината си, компонентът Tooltip е проектиран да показва съвети, когато задръжте курсора на мишката над дадена част от страницата. Освен това, в допълнение към местоположението на намек надясно, наляво и отгоре с превключване на данни = "подсказка", подсказката има следните свойства:

• Active. Използването на истинските свойства в Bootstrap Tooltip ви позволява да показвате съвети, а от друга страна, стойността false за същата собственост означава, че не можете да извеждате съвети.
• AutoPopDelay е времето, в което се показват подканите.
• AutoPopDelay. Това е периодът, през който курсорът на мишката трябва да бъде насочен към елемента, така че да се появи подсказка.
• IsBaloon. Ако стойността на подсказката за подсказка HTML е вярна, тогава полето за промпт ще изглежда като облак.
• ToolTipIcon. Това е символ, който се появява в прозореца за бърз достъп.

Tooltipster

За да създадете перфектни инструкции, например, на сайт, създаден на WordPress, не е необходимо да разбирате напълно езика на уеб разработчиците. Достатъчно е да знаете за съществуването на такъв plug-in (разширение), като Tooltipster. От заглавието е ясно, че този плъгин се основава на подсказката и според неговите свойства и цел е изненадващо подобен на него. За какво е тази приставка? Той ви позволява да създадете необходимия HTML маркер вътре в подсказката.

Работата на приставката се основава на вмъкването на преки пътища в страницата. Съдържа всички основни атрибути на HTML за първоначално зареждане Подсказка :. съдържание (данни подсказка-съдържание), заглавие, позиция, спусъка и т.н. Това ви позволява да промените темата, шрифтът, размерът на съвети, цвят, поставете изображението, и много повече.