jquerytools/jquerytools — Issue #666: Add HoverIntent to Tabs onmouseover
Author: bookone
Created: 2012-02-17 07:31:51+00:00
State: open

I think the tabs should add hoverIntent when we use mouseover (really helps in terms of usability!).

It could be achieved by simple steps below:

1. download and include hoverIntent from http://cherne.net/brian/resources/jquery.hoverIntent.html

2. add the following configurations under the default conf array: hoverIntent:false, timeout:0, sensitivity:7, interval:100

3. replace

// setup click actions for each tab
tabs.each(function(i) {
$(this).bind(conf.event, function(e) {
self.click(i, e);
return e.preventDefault();
});
});

with:

// setup click actions for each tab
tabs.each(function(i) {
if(conf.event == 'mouseover' && conf.hoverIntent == true){
$(this).hoverIntent({
timeout:conf.timeout,
sensitivity:conf.sensitivity,
interval:conf.interval,
over:function(e){
self.click(i,e);
return e.preventDefault();
},
out:function(){}
});
}
else{
$(this).bind(conf.event, function(e) {
self.click(i, e);
return e.preventDefault();
});
}
});

4. then you simply need to call tabs with the following configurations:
event:"mouseover",hoverIntent:true
and optionally add these configurations: timeout:0, sensitivity:7, interval:100