[Ennio]

I'm looking to implete a function like I saw in LinkedIn.com If you put the mouse over someones name you get a pop-up with more informaion and link.

Does any one know where I can find a sample script like that.

Thank you.

[Wimpy]

You should look at DHTML, because that effect is a combination between HTML, CSS and Javascript and perhaps even some server-side programming and AJAX.

W3Schools DHTML Tutorial

Good luck!

Ennio, on 7 May, 2009 - 07:45 AM, said:

I'm looking to implete a function like I saw in LinkedIn.com If you put the mouse over someones name you get a pop-up with more informaion and link.

Does any one know where I can find a sample script like that.

Thank you.

[level1]

Check out
Walter Zorn Tooltip

[crazyjugglerdrummer]

I haven't done much like that, but i imagine its a reaction to a mouseover event. You take the coordinates where the event occurred, and add an absolutely positioned div over the other content near the mouseoever. The hard part would be figuring out what data to display, either using a server side language or just predefined tooltips.

[Wimpy]

Exactly, the absolutely positioned div could already exist though, and you could use the "title"-attributes data to show and just prevent the default tooltip to appear.

Your javascript function could look something like this, but this is only one solution of a million possible ones (I haven't tried it, just created it two seconds ago):

function Show(eventObject)
{
	var element = null; 
	if(eventObject.target) // Mozilla/Standard
	{
		element = eventObject.target;
	}
	else if(eventObject.srcElement) // IE
	{
		element = eventObject.srcElement;
	}
	else
	{
		// if we couldn't determine the calling element
		// we return without doing anything in order to
		// let the default tooltip show instead
		return;
	}
	
	var x = eventObject.clientX; // get the mouse pointers x coordinate in pixels
	var y = eventObject.clientY; // get the mouse pointers y coordinate in pixels
	
	// Retrieve the element that will show the data
	var showElement = document.getElementById('absolutelyPositionedDivId');
	showElement.style.top = y + "px";
	showElement.style.left = x + "px";
	
	// Removes all child nodes from the absolutely positioned div
	while(showElement.hasChildNodes())
	{
		showElement.removeChild(holder.lastChild);
	}
	
	// Creates a html p-element
	var p = document.createElement('p');

	// Creates a text node
	var text = document.createTextNode(element.title);
	
	// Appends the text node to the p-element and the p-element
	// to the absolutely positioned div
	p.appendChild(text);
	showElement.appendChild(p);
	
	// Displays the absolutely positioned div
	showElement.style.display = 'block';
	
	// Prevents the default tooltip from showing
	if(eventObject.preventDefault) // Mozilla/standard
	{
		eventObject.preventDefault();
	}
	else if(window.event) // IE
	{
		window.event.returnValue = false;
	}
}

Then you simply call this function on mouseover from the element in either this way (using inline event handler):

<element id="testelement" onmouseover="Show()" title="This data should show" />

or the more elegant way in the javascript file (using event handlers):

window.onload = function()
{
	document.getElementById('testelement').onmouseover = Show;
}

or like this, which is even better (using event listeners):

function SetListener(dElement, dEvent, dFunction)
{
	if(window.addEventListener) // Mozilla/Standard
	{
		dElement.addEventListener(dEvent, dFunction, false);
	}
	else if(window.attachEvent) // IE
	{
		dElement.attachEvent('on' + dEvent, dFunction);
	}
}

function Init()
{
	SetListener(document.getElementById('testelement'), 'mouseover', Show);
}
SetListener(window, 'load', Init);

Well, you get the Idea, there are many solutions for everything! Try it out, I can't guarantee that it works though since I haven't tested it for this special occasion! Let me know!

...

The only thing left to do with this is to write some simple HTML/CSS and I leave that up to you! Hope I've been to some help!

crazyjugglerdrummer, on 7 May, 2009 - 09:13 AM, said:

I haven't done much like that, but i imagine its a reaction to a mouseover event. You take the coordinates where the event occurred, and add an absolutely positioned div over the other content near the mouseoever. The hard part would be figuring out what data to display, either using a server side language or just predefined tooltips.