Skip to main content

Search and Top Navigation

#9349 open bug ()

Opened May 31, 2013 10:39AM UTC

Last modified June 01, 2013 02:23AM UTC

Tooltip: inputs with tooltips require two clicks to open on iOS

Reported by: MosheElisha Owned by:
Priority: minor Milestone: none
Component: ui.tooltip Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:
Description

When using a JQuery UI tooltip on an input[type=text] and browsing from iPhone Safari, the user needs to click twice on the input in order to place the cursor inside the input text and be able to type.

The first click on the input only shows the tooltip (it does not open the keyboard and does not place the cursor inside the input).

Only the second click on the input, opens the virtual keyboard and places the cursor inside the input.

This can be reproduce on all the Tooltip demo pages http://jqueryui.com/tooltip/.

I tried:

tooltips.on( "tooltipopen", function(e, ui ) {
            var el = $(e.originalEvent.target || e.originalEvent.srcElement).closest($(this).tooltip('option', 'items'))[0];
            $(el).focus();
        });

But this helps only a little - with this code, clicking the input text works OK if the keyboard is closed (For example, when entering the first input with a tooltip or manually closing the keyboard (by clicking on the keyboard "Done" button) before clicking on the next input.

Environment:

iPhone 3Gs v6.1.2

Browser_UserAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_2 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B146 Safari/8536.25

Attachments (0)
Change History (2)

Changed June 01, 2013 01:32AM UTC by tj.vantoll comment:1

status: newopen
summary: Tooltip on input text does not work smoothly with iPhoneTooltip: inputs with tooltips require two clicks to open on iOS

Changed June 01, 2013 02:23AM UTC by tj.vantoll comment:2

Clicking on input elements on iOS:

Without a tooltip widget I get a mousemove event and then focus/focusin events.

With a tooltip widget I get a mousemove event but no focus/focusin events. The mousemove event is what actually opens the tooltip initially. Something the tooltip widget is doing is preventing the focus events from firing. Not sure what, I'd have to play with this more.