Подсказка за Bootstrap: създаване на подсказки

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

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

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


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


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

Toolkit for tooltips

Bootstrap е най-подходящ за създаване на изскачащи подкани. Това е лесен за научаване шаблон за създаване на приложения и сайтове, написани на HTML, CSS, Sass и javascript.
Ако е посочено, тогава за изскачащите подкани се използва един от графичните елементи на шаблона Bootstrap - Tooltip. Рамката на Bootstrap е създадена за "Twitter" и първоначално се нарича "Twitter blu-Print". След някои промени през 2012 г., той получи мрежа в 12 колони, станал адаптивен и придобил обичайното име - Tooltip. Типът е елемент, който се появява, когато задържите курсора върху определен елемент на екрана на монитора.

Създаване на подсказка

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

Пример за подсказка за първоначално зареждане

Има четири основни опции за поставяне на подсказки: отляво и отдясно, както и отгоре и отдолу на елемента.
Най-добър съвет
Съвет отдясно
Намек по-долу
Съвет отляво

Прилагане на подканите

Има много приложения на подсказката Bootstrap. Можете да поставите подсказките, така че потребителят да може да разбере превода на текста от чужд език в текста. Можете също да използвате подсказките като инструмент, който да помогне на потребителя да разбере стойностите на бутоните, когато се намира над тях. Шаблоните на Bootstrap Tooltip често се използват на сайтове в различни организации за създаване на абонамент за новини. Това ви позволява да поддържате клиентите си актуални по въпросите, а също така предоставя на посетителите възможността да получават нова информация, като например размера на отстъпките, офертите, промените в компанията.
Помислете за пример, когато потребителят трябва да въведе своя имейл адрес, за да се абонира за разпространението. задачаПредоставянето на абонамент за клиент за новини е най-лесно осигурено чрез използването на HTML5 и необходим атрибут. В този случай е необходим стил с подсказки, за да може потребителят да разбере последователността на действията. Например, след въвеждане на имейл адрес, поставете отметка в полето: "Съгласен съм да получавам фирмени новини по електронна поща." По-долу е даден пример за код на формуляр.
За да напишете такъв код в HTML Bootstrap Tooltip няма да бъде специална задача. Но ползите от него са значителни. Сега потребителите знаят всички новини за компанията. Това е един вид безплатна реклама.

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

Какво да направя, ако подсказката за стартиране не работи? Първата и основната грешка, в която атрибутът на стила няма да работи - този инструмент не е включен. За да го активирате, трябва да използвате специален код.
Този метод ви позволява да инициализирате абсолютно всички подсказки на уеб страницата. Втората често срещана грешка е липсата на заглавие jQuery.
За правилната работа, връзката е предпоставка - трябва да се посочи функция за обработка на данни като "Javascript Script".

Свойства на подсказка

Компонентът Tooltip е предназначен основно за показване на подкани при задържане на показалеца на мишката върху една или друга част на страницата. Но освен поставянето на подсказка вдясно, наляво и горе с помощта на data-toggle = "tooltip", подсказката има следните свойства:
  • Активно. Използването на истинските свойства на Bootstrap Tooltip позволява на дисплея на подканите, от своя страна, да бъде невярноза същото имущество означава забрана за показване на подканите.
  • AutoPopDelay е времето, когато картите се показват.
  • ​​
  • AutoPopDelay. Това е времето, за което курсорът на мишката трябва да бъде поставен върху елемента, така че да се появи подкана.
  • IsBalone. Ако стойността на подсказката за HTML Bootstrap Tooltip е вярна, прозорецът с подсказки ще изглежда като облак.
  • ToolTipIcon. Това е символ, който се появява в подсказката.
  • Tooltipster

    За да създадете отлични подсказки, например, сайт, създаден на Wordpress, не е задължително да познава отлично езика на уеб разработчиците. Достатъчно е да знаете за съществуването на такъв плъгин (разширение) като Tooltipster. От заглавието е ясно, че този плъгин е базиран на Tooltip и неговите свойства и цел са изненадващо сходни с него. Защо ми е необходим този плъгин? Тя ви позволява да създадете необходимата HTML маркировка в подсказката.
    Работата на плъгина се базира на вмъкването на шорти на страница. Той съдържа всички основни атрибути на HTML Bootstrap Tooltip: съдържание (data-tooltip-content), заглавие, позиция, спусъка и т.н.

    Свързани публикации