Print Page - how to make tooltip click to show and click to hide

Title: how to make tooltip click to show and click to hide
Post by: James on April 29, 2020, 08:11:14 AM

tooltip can not set show and hide use same set

Title: Re: how to make tooltip click to show and click to hide
Post by: jarry on April 30, 2020, 01:18:12 AM

You can set the 'showEvent' and 'hideEvent' to trigger the tooltip to display or hide on some events.

Code:

$('#tt').tooltip({
  showEvent: 'click'
});

Title: Re: how to make tooltip click to show and click to hide
Post by: James on April 30, 2020, 11:08:58 PM

Quote from: jarry on April 30, 2020, 01:18:12 AM

You can set the 'showEvent' and 'hideEvent' to trigger the tooltip to display or hide on some events.

Code:

$('#tt').tooltip({
  showEvent: 'click'
});

if you set like

Code:

$('#tt').tooltip({
  showEvent: 'click',
  hideEvent: 'click'
});

then the tooltip will never show

Title: Re: how to make tooltip click to show and click to hide
Post by: jarry on May 02, 2020, 06:19:32 PM

This is the code to fix this issue. Please put it to the page.

Code:

(function($){
	var hideMethod = $.fn.tooltip.methods.hide;
	$.extend($.fn.tooltip.methods, {
		hide: function(jq, e){
			return jq.each(function(){
				var tip = $(this).data('tooltip').tip;
				if (tip && tip.is(':visible')){
					hideMethod.call($(this),$(this),e);
				}
			})
		}
	})
})(jQuery);

Title: Re: how to make tooltip click to show and click to hide
Post by: James on May 03, 2020, 06:20:11 AM

Quote from: jarry on May 02, 2020, 06:19:32 PM

This is the code to fix this issue. Please put it to the page.

Code:

(function($){
	var hideMethod = $.fn.tooltip.methods.hide;
	$.extend($.fn.tooltip.methods, {
		hide: function(jq, e){
			return jq.each(function(){
				var tip = $(this).data('tooltip').tip;  // Cannot read property 'tip' of undefined
				if (tip && tip.is(':visible')){
					hideMethod.call($(this),$(this),e);
				}
			})
		}
	})
})(jQuery);

Title: Re: how to make tooltip click to show and click to hide
Post by: James on May 03, 2020, 06:25:18 AM

it seems also works on validatebox message tip, but which is not needed

Title: Re: how to make tooltip click to show and click to hide
Post by: James on May 03, 2020, 06:27:01 AM

Code:

(function ($) {
    var hideMethod = $.fn.tooltip.methods.hide;
    $.extend($.fn.tooltip.methods, {
        hide: function (jq, e) {
            if (e) {
                return jq.each(function () {
                    console.info($(this).data());
                    var tip = $(this).data('tooltip').tip;
                    if (tip && tip.is(':visible')) {
                        hideMethod.call($(this), $(this), e);
                    }
                });
            }
        }
    });
})(jQuery);

is this ok?

Title: Re: how to make tooltip click to show and click to hide
Post by: jarry on May 06, 2020, 11:42:40 PM

Please look at this example http://code.reloado.com/uciquy3/edit#html. It works fine.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: James on April 29, 2020, 08:11:14 AM