4 Replies - 12232 Views - Last Post: 07 May 2009 - 11:33 AM

#1 Ennio  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 26
  • Joined: 29-May 08

Mouse over Pop-up ballon

Post icon  Posted 07 May 2009 - 08:45 AM

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.
Is This A Good Question/Topic? 0
  • +

Replies To: Mouse over Pop-up ballon

#2 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Mouse over Pop-up ballon

Posted 07 May 2009 - 10:02 AM

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! :)

View PostEnnio, 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.

Was This Post Helpful? 0
  • +
  • -

#3 level1  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 65
  • Joined: 12-June 08

Re: Mouse over Pop-up ballon

Posted 07 May 2009 - 10:06 AM

Check out
Walter Zorn Tooltip
Was This Post Helpful? 0
  • +
  • -

#4 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 119
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Re: Mouse over Pop-up ballon

Posted 07 May 2009 - 10:13 AM

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.
Was This Post Helpful? 0
  • +
  • -

#5 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Mouse over Pop-up ballon

Posted 07 May 2009 - 11:33 AM

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! :)

View Postcrazyjugglerdrummer, 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.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1