Closing jQuery Tools tooltip on iphone/ipad with touchstart

Question

I have the following code being run if an iphone/ipad/ipod is detected:

$('.tooltip-trigger').tooltip({offset: [20, -110],relative:true, events: { def: 'touchstart,blur'} });

I have got the initial touch working instead of on hover by declaring def:'touchstart', however the boxes do not close and calling another touchstart like def: 'touchstart,touchstart' does not work. Neither does def: 'toggle' which seems logical to me.

Any ideas?

Answer 1

I did the same thing. Here's how:

var isiPad = navigator.userAgent.match(/iPad/i) != null;

My tooltip function looks like this:

$(function() {
    $(document).tooltip({
        items: "[data-fn]",
          content: function() {
              var element = $( this );
              if ( element.is( "[data-fn]" ) ) {
              var s = element.attr('data-fn');
              var fn = /* some text content */

              if (isiPad) fn += "<div align=right'><a href='#' class='ipadTooltipHack'>close</a></div>";
              return fn;
              } 
          }     
       });
});

Finally I added this:

$('.ipadTooltipHack').tooltip('close');

Seems to work.

I tried adding a hide: option to the tooltip function to autohide after 10s which worked but then you could not open that tooltip again until a different one was open.

Answer 2

I resolved this by placing a close button on the tooltip for smartphones and tablets only

Answer 3

I could not replicate the solution by Bill Nobes and nlsbshtr, pressing the 'close' link also navigated to the top of the page. I changed it the a slightly easier solution.

This is based on jQuery and the Modernizr.touch function to detect if we are on a touch device. It uses the standard title tag and it closes the opened tooltip using the recommended close-method on click.

$(function() {
    $( '.tooltip-trigger' ).tooltip(
    {
        content: function() {
            var element = $( this );
            var s = element.attr('title');
            if ('' == s)
                return null;
            if (Modernizr.touch) // using Modernizr to detect touch devices.
                s += "<div align=right'><a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close</a></div>";
            return s;
        } 
    });
});

replace .tooltip-trigger with the class of your choice.

Answer 4

user2956826 answer follows the jqueryui recommendation here - which is:-

Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive

...detailed here

However, the HTML special characters included seemed to be displayed literally in the browser and I needed to replace them with non-html equivalents within the double quotes. There is also (trivially) a missing single-quote in the same line around align=right so I have for eg.

 s += "<div align='right'><a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close</a></div>";

Answer 5

For me, this works:

Add css:

.ui-tooltip{cursor:pointer;}

Add jquery:

$('body').on('click','.ui-tooltip', function(){
   $(this).hide();
});

After that, tooltips will close, when you click on it, even on iPads.

Answer 6

well, just ran in the same issue, but had one more requirement - since I have multiple tooltips I need at least to close opened tooltips while a new one is opened. Came with this easy implementation, maybe will help somebody out

var $tooltipCaller = $('.tooltip');

  $tooltipCaller.tooltip({
    open: function (e, ui) {
      $tooltipCaller.not(this).tooltip('close');
    }
  });