Использование всплывающей подсказки Zurb Foundation вне фреймворка

Я пытаюсь использовать скрипт всплывающей подсказки zurb Foundation, не загружая какую-либо другую библиотеку фундамента для моего сайта, но когда я пытаюсь загрузить его, он выдает эту ошибку js.

Моя разметка выглядит примерно так:

<span class="has-tip tip-right" data-width="200" title="This is a tip">This is a tip</span>

<script src="js/jquery.js"></script>
<script src="js/jquery.foundation.tooltips.js"></script>
<script src="js/app.js"></script>

JS-ошибка:

Uncaught TypeError: Object [object Object] has no method 'tooltips' app.js:5
(anonymous function) app.js:5
fire jquery.js:1075
self.fireWith jquery.js:1193
jQuery.extend.ready jquery.js:435
DOMContentLoaded jquery.js:949

Вот как я загружаю скрипт

(function ($) {  

$(function(){
    // initialize tooltips
    $(document).tooltips();
});
})(jQuery);

Кто-нибудь знает, почему это происходит?


javascript jquery tooltip zurb-foundation
person calebo    schedule 04.10.2012    source источник
comment
Можете ли вы опубликовать полную HTML-страницу? Либо отсутствует ссылка на jQuery, либо ваши ссылки js не в порядке.   -  person Ed Charbeneau    schedule 05.10.2012
comment
Я включил фрагмент разметки, есть основные части, внизу есть 3 ссылки на скрипты.   -  person calebo    schedule 05.10.2012

Ответы (3)


arrow_upward
1
arrow_downward

Я думаю, вы не называете функцию правильным именем. Должно быть $(document).foundationTooltips() и НЕ $(document).tooltips()

Полный пример:

(function ($) {  

$(function(){
    // initialize tooltips
    $(document).foundationTooltips(); //This line right here
});
})(jQuery);
person Ed Charbeneau    schedule 05.10.2012

arrow_upward
0
arrow_downward

В новом документе должно быть следующее:

<span data-tooltip class="has-tip tip-right" data-width="200" title="This is a tip">This is a tip</span>

Обратите внимание на «подсказку данных». Это очень трудно найти документально прямо сейчас.

person drhenner    schedule 21.03.2013
comment
как в - это вообще не задокументировано, просто показано в примере фрагмента - person JM4; 17.08.2013

arrow_upward
0
arrow_downward

Всплывающие подсказки Foundation, по-видимому, используют атрибут title в качестве всплывающей подсказки по умолчанию, как и большинство библиотек всплывающих подсказок. data-tooltip — это настраиваемое поле, используемое только теми, кто хочет использовать его самостоятельно, а не как документированный элемент. Погуглите "атрибуты данных в html5".

person Michael Lasell    schedule 29.03.2013