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

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

Я немного запутался в подсказках. Они описаны в документации, но Twitter предполагает некоторые знания. Например, они говорят, чтобы вызвать всплывающую подсказку со следующим кодом JavaScript.

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

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

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

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

Ответ 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, таким образом вы можете добавить специальные стили или параметры только в этот раздел. Короче говоря, вы можете использовать любой действительный селектор для таргетинга ваших всплывающих подсказок, и нет необходимости загрязнять вашу разметку дополнительным классом для их таргетинга.

Ответ 2

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

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

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

а затем

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

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

удачи.

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

Просто отметьте все переключатели данных...

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

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

Ответ 6

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

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

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

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

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

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

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

Ответ 7

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

<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>