Приставка за подсказки

Системата на Bootstrap е изключително богата на функционалност и възможности. Едно допълнително полезно нещо е така наречените подсказки или tooltips. В този урок ще разберем как да активираме плъгина за подсказки и как да го използваме след това.

Приставката на Bootstrap за подсказки –  как се ползва

Плъгина Tooltip е малка pop-up кутийка, която се появава когато потребителя постави или просто мине с мишката над съответният елемент:

Hover over me

Плъгините може да се включват индивидуално(ползвайки Bootstrap’s отделния „tooltip.js“файл), или всичките заедно наведнъж (ползвайки “bootstrap.js” или “bootstrap.min.js”).

Как се създава Tooltip

tooltip създаваме като добавим атрибута data-toggle="tooltip" към някакъв елемнт. Употребата на атрибута title е за да зададем текста, който ще се появи в tooltip:

Обърнете внимание, че: Tooltips трябва да са инициалицирани с jQuery: избираме определен елемент и извикваме метода tooltip(). Следващият код ще разреши употребата на  tooltips в целият документ:

Опитайте сами »

Как се позиционира Tooltips

По подразбиране tooltip ще се покаже отгоре на елемента. Употребата на data-placement атриута задава позиция на tooltip – top, bottom, left или right:

Опитайте сами »

Може да ползваме data-placement атрибута със стойност „auto“, която ще остави браузъра да определи позичията на tooltip. Например, ако стойността е „auto left“, tooltip ще се покаже отлява приоритетно ако е възможно иначе от дясно.