Tooltip Radio Button Trigger Bug Created Jul 29, 2009

I'm a bit confused for the trigger event for showing a radio button tool tip.

I see 2 possible use cases:

1) The user will use the "tab" key to reach the radio button
2) The user will use their mouse to reach the radio button

Here is the implementation:

// mouse interaction 
		var isInput = trigger.is("input, textarea"); 
		trigger.bind(isInput ? "focus" : "mouseover", function(e) { 	 
			e.target = this;	
			self.show(e);  
			tip.hover(function() { self.show(); }, function() { self.hide(); }); 
		});

As you can see if the form element is any type of input the event will be triggered on "focus". This includes checkbox, text inputs, password, reset, submit, etc if I left any out.

It also included textarea, but for some reason not "select" tags? Is this a mistake or is there a reason for it?

Anyway back to the radio button problem...
If you tend to use your mouse and not the keyboard tab key, then you will never see a tooltip with the trigger being the radio button, until you click on the radio button. I think it's too late to show the tooltip after the click since an option is being set. I would have liked to see the tooltip displayed on mouseover (prior to click) as well as the default focus (prior to click). This isn't applicable for inputs of type text since you aren't setting any values by clicking on a text box (not until you actually type something in).

I'll stop ranting now, but I think it makes more sense to add in mouse support to both radio buttons and checkboxes, and focus support to the select element.

I made the changes already and it drastically improves the user experience for tooltips inside forms.

Here is a quick change that eliminates the problems mentioned above. I'm not at all a jQuery guru, so they can probably be optimized for performance.

var eShow, eHide;
		if(trigger.is("input:not(:radio, :checkbox), textarea")){
			eShow = "focus";	
			eHide = "blur";
		}
		else if(trigger.is("input:radio, input:checkbox, select")){
			eShow = "focus mouseover";
			eHide = "blur mouseout";
		}else{
			eShow = "mouseover";
			eHide = "mouseout";
		}
					  
		trigger.bind(eShow, function(e) { 	 
			e.target = this;	
			self.show(e);  
			tip.hover(function() { self.show(); }, function() { self.hide(); }); 
		});
		
		trigger.bind(eHide, function() {
			self.hide(); 
		});

Comments?