web-dev-qa-db-ja.com

タッチフレンドリーなツールチップ

モバイルデバイス向けのソリューションを含むJqueryツールチップを知っている人はいますか？ホバー状態が機能しないので、クリックでも機能するものが必要だと思います。たぶんそれはクリック時にモーダルボックスのように動作しますか？ここに物を捨てるだけです。最善の解決策が何であるかわからない。

-更新-

@Alveoliが提案した解決策は本当に気に入っていますが、結局自分でそれを突き刺しました。私はqTipをベースとして使用し、タッチフレンドリーなツールチップとモバイルフレンドリーなモーダルボックスの両方を作成するためにフランケンシュタインのコードをいくつか作成しました。コードの最適化にご協力いただければ幸いです。これがフィドルです... http://jsfiddle.net/cssguru/NQRBT/

jquerymobiletooltip
13
Adam Youngers

私は同じものを探していて、このエレガントな解決策を見つけました：

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

ボーナスは、モバイルでは、タッチすると「くっつき」、もう一度タッチすると消えることです。

19
Alveoli

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);
        }
    });
};
4
Pierre Spring

以前はアプリを試していましたが、そのツールチップは遅延読み込みされています。たとえば、「送信」というボタンがUIに表示され、3秒後、「データをサーバーに送信」というラベルが「送信」ボタンの下にツールチップとして表示されます。

新規ユーザーは常にアクションを完了するためにより多くの時間を必要とすることを考えると、ツールチップを実装するための良い方法だと思います。上級ユーザーは気になりませんが、新しいユーザーはしばらくするとツールチップを見ることができます。

0
Allen Xia