Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery UI tooltip. Set timeout and set hover events. Freeze tooltip on mouseover

I've googled about 2 days and can't figure out how to set timeout for http://api.jqueryui.com/tooltip/ ???

Maybe i should use jquery hoverIntent ?

here is my code

$('*[class*="help_"]').tooltip({
    open: function(e,o){
        $(o.tooltip).mouseover(function(e){
            $('*[class*="help_"]').tooltip('open');
        });
        $(o.tooltip).mouseout(function(e){
        });         
    },
    close: function(e,o) {}
});
like image 813
mindsupport Avatar asked Nov 08 '12 09:11

mindsupport


People also ask

How to add tooltip on hover jQuery?

Tooltips can be attached to any element. To display tooltips, just add title attribute to input elements and title attribute value will be used as tooltip. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element.

How to position tooltip jQuery?

The tooltip position is specified with two different configuration properties: position and offset . The position property specifies the position in relation to the trigger element. For example, a value of 'bottom center' will place the tooltip on the bottom edge of the trigger, centered horizontally.

How to create tooltip using jQuery?

The jQuery UI tooltip() method adds tooltip to any element on which you want to display tooltip. It gives a fade animation by default to show and hide the tooltip, compared to just toggling the visibility. Syntax: You can use the tooltip() method in two forms.


2 Answers

I also looked for a similar solution, showing the tooltip normally, but when mouseover on the tooltip it should stay (the content of a tooltip is some buttons).

I don't want a whole framework(qtip) to do just that, i'm already using jqUI all over my site.

so i did this:

$( document ).tooltip({
  show: null, // show immediately 
  items: '.btn-box-share',
  hide: {
    effect: "", // fadeOut
  },
  open: function( event, ui ) {
    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
  },
  close: function( event, ui ) {
    ui.tooltip.hover(
        function () {
            $(this).stop(true).fadeTo(400, 1); 
            //.fadeIn("slow"); // doesn't work because of stop()
        },
        function () {
            $(this).fadeOut("400", function(){ $(this).remove(); })
        }
    );
  }
});
like image 111
Hontoni Avatar answered Oct 22 '22 23:10

Hontoni


I have a good solution, inspired by a jQuery forum thread :

var mouseLeaveTimer;
$('.selector').tooltip(
    open: function(){
        // make sure all other tooltips are closed when opening a new one
        $('.selector').not(this).tooltip('close');
    }
}).on('mouseleave', function(e){
    var that = this;

    // close the tooltip later (maybe ...)
    mouseLeaveTimer = setTimeout(function(){
        $(that).tooltip('close');
    }, 100);

    // prevent tooltip widget to close the tooltip now
    e.stopImmediatePropagation(); 
});

$(document).on('mouseenter', '.ui-tooltip', function(e){
    // cancel tooltip closing on hover
    clearTimeout(mouseLeaveTimer);
});

$(document).on('mouseleave', '.ui-tooltip', function(){
    // make sure tooltip is closed when the mouse is gone
    $('.selector').tooltip('close');
});

[Update:Amit Added a gist for the above solution with fixes.]

like image 22
Fabien Quatravaux Avatar answered Oct 23 '22 00:10

Fabien Quatravaux