Bootstrap: подсказки на JQuery

Вторая заметка из серии, посвященной относительно детальному знакомству с CSS-фреймворком под названием Twitter Bootstrap. Сегодня я покажу вам о том, как подключать подсказки на JQuery.

Всплывающие подсказки на JQuery с Twitter Bootstrap

Итак, tooltips в бутстрапе могут быть четырех типов в зависимости от направления их появления — right, left, top и bottom. Задаются они атрибутом data-placement у гиперссылки. С помощью data-original-title можно задавать текст во всплывающей подсказке. Ну а data-toggle="tooltip" служит для указания скрипту, что здесь не просто линк, а tooltip, — задается свойством селектора в настройках.

К моему большому сожалению пример не работает в Internet Explorer 8, — выводится ошибка, связанная с JavaScript / JQuery. Разбираться с ней мне не захотелось. Тем более, что в официальной документации к фреймворку выводится тоже самое.

В отличие от вкладок, которыми можно было пользоваться и без явной инициализации, здесь помимо подключения JavaScript потребуется написать немного программного кода на нем же:

<script src="http://yandex.st/jquery/1.8.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script>
jQuery(document).ready(function($) {
  // 1) Всплывают при наведении курсора:
  $('.example-1').tooltip({
    trigger: "hover",
    selector: "a[data-toggle=tooltip]"
  })
  // 1) Всплывают при получении фокуса:     
  $('.example-2').tooltip({
    trigger: "focus", 
    selector: "a[data-toggle=tooltip]"
  })      
})</script>

Выше были показаны два варианта инициализации скрипта подсказок. В первом случае свойство trigger указывает на срабатывание при наведении курсора мышка, а во втором  — только при получении фокуса. HTML разметка будет выглядеть примерно следующим образом:

<p class="example-1"><!-- Первый пример. -->
Tight pants next level keffiyeh 
<a title="" href="#"
data-toggle="tooltip" 
data-original-title="Вспл. подсказка по умолчанию - сверху.">
you probably
</a> 
haven't heard of them. Photo booth beard raw denim 
letterpress vegan messenger bag stumptown. Farm-to-table 
seitan, mcsweeney's fixie sustainable quinoa 8-bit 
american apparel 
<a title="" href="#" 
data-placement="left" 
data-toggle="tooltip" 
data-original-title="Всплывающая подсказка слева.">
have a
</a> 
terry richardson vinyl chambray. Beard stumptown, 
cardigans banh mi lomo thundercats. Tofu biodiesel 
williamsburg marfa,  four loko mcsweeney's cleanse 
vegan chambray. A really ironic artisan 
<a title="" href="#" 
data-placement="right" 
data-toggle="tooltip" 
data-original-title="Всплывающая подсказка справа.">
whatever keytar
</a>, 
scenester farm-to-table banksy Austin 
<a title="" href="#" 
  data-placement="bottom" 
  data-toggle="tooltip" 
  data-original-title="Нижняя всплывающая подсказка.">
twitter handle
</a> 
freegan cred raw denim single-origin coffee viral.
</p> 

<hr>

<p class="example-2">А вот <!-- Второй пример. -->
<a title="" href="#" 
  data-toggle="tooltip" 
  data-original-title="Фокус получен.">эта</a>
всплывающая подсказка покажется только 
при получении фокуса - нажимайте клавишу табуляции.
</p>
Скачать
Опубликовано 18-03-2013 в 12:05


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты