preventDefault in Chrome browser

The code below will create a custom tip instead of default’s tip created by title attribute of a link with mouseover the link. The code gets rid of default’s tip, created by title attribute and a custom tip is shown with a delay of half a second. Everything works the way it is supposed to work in most of the browser’s, with an exception of google’s Chrome. In Chrome, default’s tip is shown along with custom tip. When setTimeout is not implemented to delay appearance of a custom tip, everything behaves the way it is meant to.

Here is my code:


var Tooltips = 
{
	init: function()
	{
		//create a reference to content div
		var content = document.getElementById("content");
		//collect links contains inside of our content into a node list of links
		var contentLinks = content.getElementsByTagName("a");
		//for every link
		for (var i = 0; i < contentLinks.length; i++)
		{
			//collect this link's title
			var title = contentLinks[i].getAttribute("title");
			//if link has a title and its title's value is longer than 0
			if(title && title.length > 0)
			{
				//we have the right link
				//add event listener
				Core.addEventListener(contentLinks[i], "mouseover", Tooltips.showTipListener);
				Core.addEventListener(contentLinks[i], "mouseout", Tooltips.hideTipListener);
				Core.addEventListener(contentLinks[i], "focus", Tooltips.showTipListener);
				Core.addEventListener(contentLinks[i], "blur", Tooltips.hideTipListener);
			}
		}
	},
	
	showTipListener: function(event)
	{
		var element = this;
		var theFunction = function()
		{
			Tooltips.showTip(element);
		};
		this._timer = setTimeout(theFunction, 500);
		Core.preventDefault(event);
	},

	showTip: function(link)
	{
		//before we display a tip, we need to make sure that it is already not displayed
		Tooltips.hideTip(link);
		//create tool tip container
		var tipContainer = document.createElement("span");
		//assign our tip container a class of a tooltip
		tipContainer.className = "tooltip";
		//place text inside our tipContainer
		var tipText = document.createTextNode(link.title);
		link.title = "";
		//place tipText inside our tipContainer
		tipContainer.appendChild(tipText);
		//place our tip container with text and style assigned to it (our tip) inside our link
		link.appendChild(tipContainer);
		//create a reference to our tip for this link
		link._tooltip = tipContainer;
		//get rid of original title attribute inside a link
	},
	
	hideTipListener: function(event)
	{
		
		clearTimeout(this._timer);
		Tooltips.hideTip(this);
	},
	
	hideTip: function(link)
	{
		//this whole thing will be done if link already displays a tooltip
		if(link._tooltip)
		{
			//restore link's title attribute and its value
			link.title = link._tooltip.childNodes[0].nodeValue;
			//remove tooltip completely from our link
			link.removeChild(link._tooltip);
			//null value of link._tooltip
			link._tooltip = null;
		}
	}
};

Core.start(Tooltips);

You will need to perform the part that hides the default tooltip, before the timeout is set.


link.title = "";

When you’ve moved it to the section of code that sets the timer, that line will then look like this:


this.title = "";