Вопрос по twitter-bootstrap, javascript – Всплывающие подсказки с Twitter Bootstrap

70

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

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

<code>$('#example').tooltip(options)
</code>

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

<code>$('.tooltipclass').tooltip(options)
</code>

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

Ваш Ответ

7   ответов
0

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

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

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

Затем вы можете вызвать все ссылки с.link Класс прикреплен как всплывающая подсказка, вот так:

$('.link').tooltip()

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

Лучшее использование data-rel = & quot; подсказка & quot; вместо rel = & quot; подсказка & quot; соответствовать стандартам HTML.
@schmmd Я не вижу причин, по которым производительность будет падать, если у вас нет 100 тысяч подсказок для выбора, так что не стоит сильно беспокоиться об этом, это селектор атрибутов, подобный CSS.
Вы можете не заботиться о семантике, но в идеалеrel лучше всего зарезервировано для этих целей иclass может быть лучше здесь, видитеstackoverflow.com/questions/15214776/…
Отлично! Есть ли проблемы с производительностью$('[rel=tooltip]').tooltip()? schmmd
отличный совет о rel = & quot; подсказке & quot ;!
14

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

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

а потом

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

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

удачи.

5

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

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

это работает для меня, в настоящее время всплывающая подсказка появляется в верхней части элемента. Как я могу изменить это так, чтобы подсказка появилась внизу?
2

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

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

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

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

РЕДАКТИРОВАТЬ: очевидно, вы не можете использовать классtooltip (вероятно, потому что это где-то для внутреннего использования!).

I'm just wondering why bootstrap doesn't run the code you specified with some class I can include.

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

Я обновил свой пост с некоторыми дополнительными объяснениями.
Я не надеялся на магию, я просто удивляюсь, почему bootstrap не запускает код, который вы указали с каким-то классом, который я могу включить. schmmd
Кстати, это на самом деле рано, что я попробовал. Вы не можете использовать классtooltip, Он скрывает содержимое тега. Я перешел наtooltiparea. schmmd
3

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

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

3

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

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

Похожие вопросы