Google Toolbar Hijacking Style and Tooltip

Quick update on this. The tooltip stealing behaviour I have observed seems to happen in Firefox 3 on Vista, in IE 7 on XP and IE 8 on Vista, the tooltips are left intact. Those who have checked other platforms may add their findings to the comments.

Well I have been looking into this issue over the last couple of days and I am surprised that more web developers aren't voicing their displeasure about the way that Google Toolbar hijacks the background-color style of form elements it thinks it can autofill and how it overwrites the title attribute on these fields as well.

Now, let me begin by saying that I think browser enhancements like this can be a great addition to any browser but there should be an option on the development side to disable them, particularly when they can have such an impact on the usability of forms. The main issues I have with the toolbar are:

1. Autofill is turned on by default. Google's position is that the user should decide whether they want this behaviour or not but if that is the case then the user is quite capable of turning it on themselves. Many times clients, who I assume are pretty representitive of the average web user have asked me why it was that some fields in their forms are yellow. Therefore it seems that this visual prompt is of little use to users in any case unless they know about the autofill functionality in Google Toolbar.
2. Autofill may break usability. Frequently, web developers would use CSS styled visual queues on form fields to indicate validation status and would also wish to provide extra information about the data expected in the field to the user via the tooltip. Both these tasks become very difficult to accomplish when the Google Toolbar hijacks these properties. If users don't recognise the meaning of the yellow background, they may think the field has some other significance that it does not. Also, what happens if a developer wants to style their form with a background color that is the same as the highlighted field colour? Should a plugin really have the power do dictate the design choices made - I don't believe so.
3. There is no 'Off' switch. Some browser plugins I have encountered allow the developer to disable them. For instance, the Skype plugin which attempts to identify phone numbers on a web page and render them as a clickable button which launches a call to that number via Skype can be disabled with a META tag.
4. There are issues of aesthetics here - many clients have remarked to me that the highlighted fields look ugly in the overall context of the syle of the form.

On a site I am currently engaged on, the colour change isn't really an issue but the tooltip hijacking is. I had hoped to provide extra information for users in the tooltip describing in more detail than I could in a label, the data they should enter in each field. Now it seems that I can attempt to 'fool' the toolbar by giving my fields non-standard names. However, what I seem to be finding is that if I have label's who's for attribute points to the field, the toolbar will use the content of the label as a hint to the kind of data expected in the field.

For example, I have the following code:

<label for="txt_ccn">Mobile</label><input id="txt_ccn" name="txt_ccn">

Now the name txt_ccn seems fairly ambiguous to me, yet the field is flagged by the toolbar as a field it can autofill. I can only conclude in this case that either the toolbar is psychic or that it is using the content of the label element associated with the field to figure out the data expected in the field.

The other problem I have with a naming based solution is that it really should be in the developer's domain to choose whatever field names suit their project. Many developers for instnace, like to map field names to object members in their server-side code.

With all these considerations in mind I began to look for workarounds to these issues. I found precious little on the topic out there (maybe most developers just don't care) but I did find a great article here though it is somewhat dated.

Using some of the ideas from that article, and given that I am using JQuery already in this project I decided I would write a small JQuery Plugin to address these issues. For IE browsers I was able to use the onpropertychange event to prevent the toolbar from modifying the background color of the fields. Similarly for Mozilla based browsers, I was able to use the onDomAttrModified event to catch the toolbar and remove the background color change.

Sadly though, this approach did not work for the title attributes on the fields in Firefox 3 with the toolbar installed. The toolbar replaced those regardless so I guess it makes these changes outside the scope of the document DOM - very annoying!

In any case, here is my JQuery plugin code which some may find useful to at least address the aesthetic and some of the usability issues. Basically, it itterates through the input elements in a document, attaching an event listener fuction which simply prevents the Google Toolbar applying the background color style on all input elements by resetting the style attribute on the field to an empty string each time it detects an attempt to change the attributes of the field.


jQuery(function($){
$.fn.googleToolbarStyleRemover = function(options){
function setListeners(){
if (typeof (this.onpropertychange) == "object"){
$('input').bind('propertychange',function(e){
e.preventDefault();
$('input').attr('style','');
});
}
else if ($.browser.mozilla){
$('input').bind('DOMAttrModified',function(e){
e.preventDefault();
$('input').attr('style','');
});
}
else
{
return false;
}
}
return setListeners();
}
})


To use the plugin you would simply paste the above code into a javascript file named jquery.googleToolbarStyleRemover-1.0.js and link that to your documents using:


<script type="text/javascript" src="path_to_file/jquery.googleToolbarStyleRemover-1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.googleToolbarStyleRemover();
});
</script>


Obviously this code would need to appear after you had called the main JQuery file.

If anyone out there has found a way to address the tooltip issue or those who have trie experimented with the toolbar's behaviour in a wider range of browsers and operating systems, I would love to hear from them.