Foundation tool-tip `без $(document).foundation();` и `modernizr`

Я пытаюсь инициализировать наконечник основы без инициализации всего (т.е. $(document).foundation()), и я не выполняю эту простую задачу.

Мне интересно (1) Как использовать new Foundation.Tooltip вместо этого (2) мне нужно modernizr, потому что документация на веб-сайте фундамента не упомянуть модернизацию как требование.

Я упомянул modernizr, потому что без этого инструментального наконечника не было бы никаких стилей и html внутри, которые будут отображаться.

Спасибо

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link rel="stylesheet" type="text/css" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css'; return false;" />

<body>
    <div class="row">
        <span class="has-tip" title="Tooltips are awesome, you <a>link</a> totally use them!">
          Hover me
        </span>
    </div>



    <script id="jsbin-javascript">
        $(document).ready(function() {
            new Foundation.Tooltip($(".has-tip"), {
                allowHtml: true
            });

            // $(document).foundation();
        })
    </script>
</body>

</html>

Ответы

Ответ 1

Сначала ответьте на вторую часть: Foundation 6 не требует Modernizr (но F5 сделал) (см. http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6), поэтому вы можете использовать все компоненты Foundation 6 полностью без Modernizr.

В вашем примере я думаю, что вы микшируете создание подсказки динамически:

new Foundation.Tooltip($(".has-tip"), {
    allowHtml: true
});

С инициализация всплывающая подсказка:

$(document).foundation(); // initialise ALL Foundation script - usually required by Foundation generally

ИЛИ

$('.has-tip').foundation() // just scripts associated with this element (e.g. tooltips)

Итак, чтобы создать, а затем инициализировать JUST всплывающие подсказки:

new Foundation.Tooltip($(".has-tip"), {
  allowHtml: true
});
$('.has-tip').foundation();

По понятным причинам создание должно предшествовать инициализации.

См. пример: https://jsfiddle.net/tymothytym/b6eoh2yg/1/

Ответ 2

Я раньше не работал с фондом, поэтому я определенно не эксперт. Однако, я думаю, я понял, почему ваш код не работает.

Рабочий код

Вы можете получить все необходимые ссылки и посмотреть пример рабочего кода в CodePen, который находится здесь: http://codepen.io/SupposedlySam/pen/ybbYMp.

Что вам нужно для создания плагина Foundation Tooltip

Foundation.css
Modernizr.js(помещается в тег head или ниже всех других скриптов до body close (через Страница создания флага JavaScript)
jquery.js
Foundation.js
Foundation.tooltip.js(требуется только если не используется файл foundation.min.js, который включает все плагины)

Странные вещи, которые вам не сказали

Всплывающая подсказка появится в верхнем левом углу тела (при начале 0,0), если для высоты слова недостаточно высоты и высота всплывающей подсказки.
Если вы хотите, чтобы ваши всплывающие подсказки оставались открытыми при нажатии на связанное с ним слово, в элементе должен быть установлен tabIndex.
Если вы расширяете возможности плагина Foundation, вы должны инициализировать каждый элемент, который вы хотите использовать по отдельности.
Вы должны использовать " вместо двойных кавычек (") в атрибутах html, и они не могут быть экранированы с помощью обратного слэша (\).

Ответ 3

если вы не хотите инициализировать основание всего документа, вы можете инициализировать его по определенным элементам, например:

$('.has-tip').foundation();

фундамент не зависит от модернизатора, он работает без каких-либо проблем без модернизатора.

и кодировка к всплывающей подсказке без вызова document.foundation:

https://codepen.io/faw/pen/vmZjzg