2013-02-08 1 views
1

У меня есть небольшой вопрос, и я заметил только одного человека с той же проблемой (но без решения)! Я использую Фонд Zurb для создания отзывчивого веб-сайта. Фонд поставляется с несколькими полезными инструментами, одним из которых является всплывающая подсказка.Zurb Foundation: отключить has-tooltip на мобильном устройстве

На веб-сайте я использую всплывающую подсказку, чтобы сообщить пользователю, что значок будет делать при нажатии. Однако! Всплывающая подсказка раскрывается в mouseenter .., поскольку все мы знаем, что на мобильном устройстве нет реального события mouseenter, и здесь все происходит неправильно. Например, когда пользователь нажимает кнопку фильтра, он/она не обслуживается функциональностью кнопки, но вместо этого отображается всплывающая подсказка.

До сих пор не настоящая проблема, обычно с действием hover/mouseenter вы просто щелкаете дважды, но щелчок дважды не решает проблему.

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

Спасибо за любую помощь, и если я узнаю собственное решение, я прокомментирую ниже! :)

+0

Вещь я попытка сделать это omething like '$ ('. has-tip'). not ('. no-mobile-tip'). tooltip();' –

ответ

3

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

if($("html").hasClass("no-touch")) { 
    $(document).foundationTooltips(); 
} 
+0

Позвольте мне попробовать, что .. что-то проще, чем решение, которое вы ищете:) –

+0

Работает отлично, спасибо за подсказку по классу no-touch в элементе html! Вам понадобится не один раз в будущем :-) –

+0

Полезно знать @PENDO :) –

3

Там также это:

$(document).foundation('tooltip', 'off'); 

через http://foundation.zurb.com/docs/javascript.html

+1

Это все равно понадобится в сочетании с классом '.no-touch' :) Но спасибо за подсказку! –

+0

Да, это было бы. Но только по-другому ... HTH – piku

2

Foundation 4 поддерживает инвалидов функцию для сенсорных устройств в параметре данных.

data-options="disable-for-touch: true" 

пример:

<li id="print_button" class="has-tip" data-options="disable-for-touch: true" title="Print Take Five" class="none"> 
    <a href="">Print</a> 
</li> 

Источник:

{ 
    selector : '.has-tip', 
    additionalInheritableClasses : [], 
    tooltipClass : '.tooltip', 
    disable-for-touch: false, 
    tipTemplate : function (selector, content) { 
    return '<span data-selector="' + selector + '" class="' 
     + Foundation.libs.tooltips.settings.tooltipClass.substring(1) 
     + '">' + content + '<span class="nub"></span></span>'; 
    } 
} 
0

Единственное, что работал с Фондом 5.1.0 был:

Foundation.libs.tooltip.settings.disable_for_touch = true;