Подсказки с Twitter Bootstrap

Question

Я использую Twitter Bootstrap - и я не сторонний разработчик! Тем не менее, это делает процесс почти - смею сказать - весело!

Я немного смущен всплывающими подсказками. Это covered in the documentation, но Twitter предполагает некоторые знания. Например, они говорят, чтобы вызвать всплывающую подсказку со следующим кодом JavaScript.

$('#example').tooltip(options) 

После ковыряться на их источник, я понял, что поля с подсказками должны быть в классе и имеют следующий код запуска.

$('.tooltipclass').tooltip(options) 

Но теперь мой вопрос, почему не Twitter Bootstrap обеспечить такой класс tooltip? Просто чтобы обеспечить большую конфигурацию? Лучше ли добавлять отдельные элементы с помощью всплывающих подсказок в tooltipclass, или я должен добавить прилегающую область к tooltipclass? Имеет ли значение, если я использую идентификатор класса (.class) вместо идентификатора имени (#name)?

Answer 1

Я думаю, что ваш вопрос сводится к тому, какой правильный селектор использовать при настройке всплывающих подсказок, и ответ на этот вопрос - это почти то, что вы хотите.Если вы хотите использовать класс, чтобы вызвать ваши подсказки вы можете сделать это, возьмите следующий, например:

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a> 

Затем вы можете вызвать все связи с .link класса прилагается в подсказках, как так:

$('.link').tooltip() 

Теперь, чтобы ответить на вопрос о том, почему разработчики bootstrap не использовали класс для запуска всплывающих подсказок, потому что он не нужен точно, вы можете в значительной степени использовать любые селекторы, для которых вы хотите настроить таргетинг на всплывающие подсказки, например (мои личные любимый) атрибут rel. С помощью этого атрибута можно ориентировать все ссылки или элементы с набором rel собственности на tooltip, например, так:

$('[rel=tooltip]').tooltip() 

И ваши ссылки будут выглядеть как-то вроде этого:

<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a> 

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

$('#example').tooltip({ 
    selector: "a[rel=tooltip]" 
}) 

Этот селектор будет нацелен на все ваши всплывающие подсказки с атрибутом rel «внутри» вашего #example div, таким образом вы можете добавить специальные стили или параметры только в этот раздел. Короче говоря, вы можете использовать любой действительный селектор для таргетинга своих всплывающих подсказок, и нет необходимости загрязнять вашу разметку дополнительным классом для их таргетинга.

Answer 2

Это потому, что эти вещи (я имею в виду tooltip и т. Д.) Являются плагинами jQuery. И да, они берут некоторые базовые знания о jQuery. Я бы предложил вам найти хотя бы базовый учебник по jQuery.

Вам всегда нужно определить, какие элементы должны иметь всплывающую подсказку. И я не понимаю, почему Bootstrap должен предоставить класс, вы определяете эти классы или себя. Может быть, вы надеялись, что бутстрап автоматически совершит какую-то магию? Однако эта магия может вызвать множество проблем (нежелательные побочные эффекты).

Эта магия может быть легко достигнута, чтобы просто написать $(".myclass").tooltip(), эта строка кода делает то, что вы хотите. Единственное, что вам нужно сделать, - это присоединить класс myclass к тем элементам, которые необходимо применить всплывающую подсказку. (Просто убедитесь, что вы запустите эту строку кода после загрузки DOM ваш См. Ниже.)

$(document).ready(function() { 
    $(".myclass").tooltip(); 
}); 

EDIT: по-видимому, вы не можете использовать класс подсказке (вероятно, потому, что он где-то внутри используется!).

Мне просто интересно, почему bootstrap не запускает код, указанный вами с помощью некоторого класса, который я могу включить.

Вещь, которую вы хотите, производит почти тот же код, что и вам сейчас. Самая большая причина, по которой они этого не делали, заключается в том, что это вызывает массу проблем. Один человек хочет присвоить его элементу с идентификатором; другие хотят назначить его элементам с указанным именем класса; и снова другие хотят назначить его одному указанному элементу, достигнутому в процессе выбора. Эти 3 варианта вызывают дополнительную сложность, в то время как он уже предоставляется jQuery. Я не видел, чтобы многие плагины делали то, что вы хотите (просто потому, что это бесполезно, это действительно не спасает вас от кода).

Answer 3

Самый простой способ использовать это

поместить это в заголовке:

<script> 
    $(function ($) { 
     $("a").tooltip() 
    }); 
</script> 

, а затем

<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text"> 
    My link text 
</a> 

так с этим JS-код, если у вас есть тег где-либо в вашем страница с rel="tooltip" получить всплывающую подсказку.

удачи.

Answer 4

Я включил файл JS и CSS, и было интересно, почему он не работает, что сделал это работа, когда я добавил следующее в <head>:

<script> 
jQuery(function ($) { 
    $("a").tooltip() 
}); 
</script> 

Answer 5

Добавьте это в ваш заголовок

<script> 
    //tooltip 
    $(function() { 
     var tooltips = $("[title]").tooltip(); 
     $(document)(function() { 
      tooltips.tooltip("open"); 
     }); 
    }); 
</script> 

Тогда просто добавьте атрибут title="your tooltip" к любому элементу

Answer 6

Простое использование этого:

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip"> 
    tooltip 
</a> 

Использование JQuery:

$(document).ready(function(){ 
    $('#mytooltip').tooltip(); 
}); 

Вы можете левую сторону подсказки и можно просто добавить this->data-placement="left"

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a> 

Answer 7

Просто отметьте все данные-клеванты ...

jQuery(function() { 
    jQuery('[data-toggle=tooltip]').tooltip(); 
}); 

http://jsfiddle.net/Amged/xUQ6D/19/