Touch Friendly Tooltip - PullRequest
       7

Touch Friendly Tooltip

13 голосов
/ 26 августа 2011

Кто-нибудь знает подсказку Jquery, которая включает решение для мобильных устройств?Так как состояние Hover не работает, я думаю, мне нужно что-то, что также работает при нажатии.Может быть, это ведет себя как модальное поле на клике?Просто выбрасываю вещи сюда.Не уверен, что будет лучшим решением.

- Обновление -

Мне действительно нравится решение, предложенное @Alveoli, но в итоге я попробовал егосебя.Я использовал qTip в качестве своей базы и написал некоторый код Франкенштейна для создания как сенсорных, так и мобильных модальных окон.Любая помощь в оптимизации кода будет принята с благодарностью.Вот скрипка ... http://jsfiddle.net/cssguru/NQRBT/

Ответы [ 3 ]

18 голосов
/ 13 мая 2012

Я искал то же самое и нашел это элегантное решение:

http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

Бонус в том, что на мобильном телефоне он «прилипает» при прикосновении к нему и исчезает прикоснитесь его снова.

4 голосов
/ 18 августа 2014

Вы можете использовать jQuery UI Tooltip и убедиться, что подсказка закрыта при любом касании страницы следующим образом:

initTooltip = function ($el) {
    var closeTooltipOnClick = function (e) {

        // This code if for touch devices only.
        // We want to tooltip to close, when we touch
        // anywhere on the page, except if we touch on
        // the link itself.

        if ($(e.target).closest($el).size()) {
            // We just clicked on the link, so let's
            // not close the tooltip.
            return;
        }

        $('body').off('touchend', closeTooltipOnClick);
        $el.tooltip('close');
    };

    $el.tooltip({
        open: function () {

            if (!Modernizr.touchevents) {
                return;
            }
            // We make sure that the tootlip closes on
            // touch devices if there is a touch event anywhere.
            $('body').on('touchend', closeTooltipOnClick);
        }
    });
};
0 голосов
/ 26 августа 2011

Раньше я пробовал приложение, и его всплывающие подсказки загружались.Например, в пользовательском интерфейсе отображается кнопка «Отправить», а спустя 3 секунды метка «Суммировать данные на сервере» отображается в виде всплывающей подсказки под кнопкой «Отправить».

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

...