Search code examples
jquery-uimobiletooltipmobile-safari

jqueryui tooltip on mobile devices: making click event trigger other actions


I have a questionnaire with buttons that show a tooltip on mouse hover and select on mouse click. On mobile devices, ToolTip captures the first click to show the tool tip (equivalent of "hover" on computer) and the second click is used for button selection (equivalent of "click" on computer).

Now my question: how, on a mobile device, can I use the first click to both show the tooltip AND select the button ?

Is there a way I can e.g. propagate the event to make it act like on a computer ? Or intercept the first event and trigger another event ? Or should I act at the level of the button by catching the event and manually trigger tooltip showing ? (in which case I'll also need to figure out how to hide the tooltip when a button from another question is clicked). Or perhaps JQuery-UI ToolTip is not adapted to my needs?

Thanks ahead for your views LA


Solution

  • Finally I found an acceptable solution by manually hooking a click event to the buttons as follows:

    $(".questionnaire_button").click(function () {
        $(this).tooltip({ 
            position: { my: "left+15 center", at: "center+20 center" }
        });
        $(this).tooltip("open");
    })