/    Sign up×
Community /Pin to ProfileBookmark

How does this pop-up window effect work?

Copy linkTweet thisAlerts:
Feb 03.2009

See the Logos at the bottom of this page?

[url]http://www.generalatlantic.com/en/companies/overview[/url]

If you roll over any of the logos this elegant pop-up box appears. Question: How does this effect work?

Can someone please povide a working example that I can either cut and paste in or copy and emulate.

Much appreciated.

to post a comment
JavaScript

21 Comments(s) ↴

Copy linkTweet thisAlerts:
@MrNobodyFeb 04.2009 — It is a DHTML layer which can be hard-coded in the document but hidden from view until the mouseover event calls the associated layer into the spotlight. Such a layer doesn't even have to be a positioned element from the git-go. It can be dynamically positioned at the time of the mouseover event. That is what the "D" in DHTML stand for -- dynamic.
Copy linkTweet thisAlerts:
@kursonauthorFeb 04.2009 — Hi.

Thanks for the quick reply.

Do you happen to have an examplet hat you can cut in paste in as code or page examples to upload so that I may review, manipulate and emulate?

I can typically duplicate code once provided a working example. Thank you.
Copy linkTweet thisAlerts:
@robdrawFeb 04.2009 — I use this popup window software from ADP which is located at www.dpopup.com this software takes out all the hardwork and works with wordpress blogs.
Copy linkTweet thisAlerts:
@MrNobodyFeb 04.2009 — There are lots of them here: http://www.dynamicdrive.com/dynamicindex5/index.html and here is a simple one I just whipped up:
[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>DHTML Tooltip</title>
<style type="text/css">
<!--
#tooltip {
position: relative;
width: 200px;
height: 200px;
border: 2px solid blue;
padding: 5px 10px;
color: blue;
font-weight: bold;
background-color: yellow;
}
.fauxLink {
color: blue;
cursor: pointer;
text-decoration: underline;
}
-->
</style>
<script type="text/javascript">
<!-- //
function ShowHideTooltip(id, e)
{
var obj = (typeof id == 'object') ? id
: document.getElementById(id);
if (obj.style.display != "block")
{
obj.style.display = "block";
obj.style.position = "absolute";
obj.style.zIndex = "+2";
obj.style.left = (e.clientX + 10) + "px";
obj.style.top = (e.clientY + 10) + "px";
}
else
{
obj.style.display = "none";
}
e.cancelBubble = true;
return false;
}
// -->
</script>
</head>

<body>

<p>Various page content...</p>
<p>Mouse over
<span onmouseover="return ShowHideTooltip('tooltip', event)"
onmouseout="return ShowHideTooltip('tooltip', event)"
class="fauxLink">this</span>
to see DHTML Tooltip</p>

<div id="tooltip" style="display:none">
<p>Tooltip content...</p>
<p>Now is the time for all young men
to come to the aid of their country.</p>
</div>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@MrNobodyFeb 04.2009 — ...
Copy linkTweet thisAlerts:
@LeeUFeb 04.2009 — For some reason, this doesn't work in FF 3.
Copy linkTweet thisAlerts:
@MrNobodyFeb 04.2009 — That is pretty strange, because I developed it using FF3 and IE7 as my test browsers.

I just tried it again, in FF3, and it worked perfectly.
Copy linkTweet thisAlerts:
@LeeUFeb 05.2009 — My fault. When I copied it, I missed the closing bracket. Works fine now. I'm going to post it Friday (February 6) to JavaScript Source. Any particular name/URL you want me to use, or just your forum name and the link here? (You can PM me with the details, if you like.)
Copy linkTweet thisAlerts:
@MrNobodyFeb 05.2009 — My fault. When I copied it, I missed the closing bracket. Works fine now. I'm going to post it Friday (February 6) to JavaScript Source. Any particular name/URL you want me to use, or just your forum name and the link here? (You can PM me with the details, if you like.)[/QUOTE]
If you'd like one with slightly better features -- such as dynamically acquiring links and spans of a particular class, rather than having to code in-line event handlers in the BODY of the document -- then I can post that one for you to use in your JSS script library.
Copy linkTweet thisAlerts:
@LeeUFeb 05.2009 — That would be great!
Copy linkTweet thisAlerts:
@MrNobodyFeb 05.2009 — Any other features you'd like?
Copy linkTweet thisAlerts:
@LeeUFeb 05.2009 — How about changing size, depending upon the amount of text in the tooltip?
Copy linkTweet thisAlerts:
@MrNobodyFeb 05.2009 — Yep, I already did that just by eliminating the [B]height[/B] attribute in the style setting. Any other features?
Copy linkTweet thisAlerts:
@LeeUFeb 05.2009 — None that I can think of.
Copy linkTweet thisAlerts:
@MrNobodyFeb 05.2009 — OK, sending you the files by private message.

Nevermind, too much to send by private message.

This is a sample HTML page:
[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
Copyright (c) 1999-2009 - All Rights Reserved
Author: Dave Clark I (a.k.a., MrNobody)
E-mail: [email protected]
Website: www.DaveClarkConsulting.com
Location: Dayton, OH, USA
-->
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Easy DHTML ToolTips</title>
<meta name="author" content="Dave Clark Consulting">
<style type="text/css">
<!--
#link1_tooltip {
position: relative;
width: 150px;
border: 2px solid black;
padding: 5px 10px;
color: black;
font-weight: bold;
background-color: red;
}
#span1_tooltip {
position: relative;
width: 200px;
border: 2px solid blue;
padding: 5px 10px;
color: blue;
font-weight: bold;
background-color: yellow;
}
.fauxLink {
color: blue;
cursor: pointer;
text-decoration: underline;
}
-->
</style>
</head>

<body>

<p>Various page content...</p>
<p>Using <a id="link1" href="http://www.daveclarkconsulting.com/"
class="tooltip">links</a> for Easy DHTML ToolTips,<br>
and using <span id="span1"
class="fauxLink tooltip">spans</span> for Easy DHTML ToolTips.</p>

<div id="link1_tooltip">
<p>Link EasyToolTip content...</p>
<p>Now is the time for all young men
to come to the aid of their country.</p>
</div>

<div id="span1_tooltip">
<p>Span EasyToolTip content...</p>
<p>Now is the time for all young men
to come to the aid of their country.</p>
</div>

<script src="EasyToolTips.js" type="text/javascript"></script>
</body>
</html>[/code]
and this is the external JavaScript library file:
[CODE]/*
Easy DHTML ToolTips &#8212; by Dave Clark I (a.k.a., MrNobody) &#8212; Copyright (c) 2009 &#8212; All Rights Reserved

Author: Dave Clark Consulting
E-mail: [email protected]
Website: www.DaveClarkConsulting.com
Location: Terra Bella, CA, USA

Right to copy, use, and distribute (for free) given as long as this header remains intact.

To use, link this JavaScript external library file at the end of your page's BODY section.
Then, just give your link, span, etc., a unique id and a special class value which
identifies that HTML element as having an associated tooltip. The association is made
by giving the associated tooltip element an id which is a combination of the original
element's id and special class with an underscore character between them. For example:
You have a word or phrase which should have a tooltip displayed. You can wrap that word
or phrase in SPAN tags and give the SPAN tag an id of "span1" and use "tooltip" as the
special class value. Then you would define a DIV whose content is to be the tooltip.
That DIV would be given an id of "span1_tooltip" in order to associate it with the SPAN.
*/
var MyEasyToolTips = new EasyToolTips('tooltip', 'MyEasyToolTips');
//
function EasyToolTips(className, userObject) // Easy Tool Tips Constructor Function
{
GenEasyToolTips(className, userObject, document.links, this);
GenEasyToolTips(className, userObject, document.getElementsByTagName("SPAN"), this);
//
function GenEasyToolTips(className, userObject, list, output)
{
var obj, tag, x, len = list.length; // find out how many items in list
for (x=0; x<len; ++x) // loop on document links to find tooltips
{
if(list[x].id // link must have an id
&& list[x].id > " " // which is greater than blanks
&& list[x].className // and a class name
&& list[x].className.indexOf(className) >= 0 // containing the specified class name
&& (obj = document.getElementById(tag=(list[x].id+"_"+className))))
{ // associated tool tip is link id + _className
output[tag] = new EasyToolTip(list[x], userObject, tag, obj); // generate an easy tool tip entry
}
}
output.show = function(tooltip, event) // generic tooltip show function
{
tooltip.style.display = "block"; // show tooltip
tooltip.style.left = (event.clientX + 10) + "px"; // position tooltip just right of mouse cursor
tooltip.style.top = (event.clientY + 10) + "px"; // position tooltip just below mouse cursor
event.cancelBubble = true; // cancel event bubbling
return false; // skip any other event handling
}
output.hide = function(tooltip, event) // generic tooltip hide function
{
tooltip.style.display = "none"; // hide tooltip
event.cancelBubble = true; // cancel event bubbling
return false; // skip any other event handling
}
}
//
function EasyToolTip(ele, usr, tag, obj) // generate an easy tool tip entry
{
obj.style.display = "none"; // start tooltip off as non-display
obj.style.position = "absolute"; // tooltip will be absolutely positioned
obj.style.zIndex = "+2"; // tooltip will float above document content
obj.style.left = "0px"; // start tooltip off at document left
obj.style.top = "0px"; // start tooltip off at document top
//
this.easytip = obj; // save a pointer to the tooltip
if (window.Event) // if there is a static Event object
{ // then event-time event block is passed to handler
ele.onmouseover = new Function("event", "return "+usr+".show("+usr+"['"+tag+"'].easytip, event)");
ele.onmouseout = new Function("event", "return "+usr+".hide("+usr+"['"+tag+"'].easytip, event)");
}
else
{ // else event-time event block is global
ele.onmouseover = new Function("return "+usr+".show("+usr+"['"+tag+"'].easytip, event)");
ele.onmouseout = new Function("return "+usr+".hide("+usr+"['"+tag+"'].easytip, event)");
}
}
}[/CODE]
I tested these in both IE7 and FF3. I also validated it for both Transitional and Strict [B]DOCTYPE[/B]s. Don't worry about the "copyright" stuff in these two files. You do what you need to do in order to make these acceptable to your JSS script library.

Thanks,

Dave Clark
Copy linkTweet thisAlerts:
@MrNobodyFeb 06.2009 — I realized that the code I posted needed a couple more features. As it is, not only will the tooltips display in the wrong place if the document is scrolled, but the tooltips also won't honor the right and bottom edges of the client window area. So, in addition to rearranging and renaming a bunch of the variables to make more logical sense, I've also added those two features to the following code (the sample HTML page does not change).

EasyToolTips.js:
[CODE]/*
Easy DHTML ToolTips &#8212; by Dave Clark I (a.k.a., MrNobody) &#8212; Copyright (c) 2009 &#8212; All Rights Reserved

Author: Dave Clark Consulting
E-mail: [email protected]
Website: www.DaveClarkConsulting.com
Location: Terra Bella, CA, USA

Right to copy, use, and distribute (for free) granted as long as this header remains intact.

To use, link this JavaScript external library file at the end of your page's BODY section.
Then, just give your link, span, etc., a unique id and a special class value which
identifies that HTML element as having an associated tooltip. The association is made
by giving the associated tooltip element an id which is a combination of the original
element's id and special class with an underscore character between them. For example:
You have a word or phrase which should have a tooltip displayed. You can wrap that word
or phrase in SPAN tags and give the SPAN tag an id of "span1" and use "tooltip" as the
special class value. Then you would define a DIV whose content is to be the tooltip.
That DIV would be given an id of "span1_tooltip" in order to associate it with the SPAN.
*/
var MyEasyToolTips = new EasyToolTips('tooltip', 'MyEasyToolTips');
//
function EasyToolTips(className, usrObjName) // Easy Tool Tips Constructor Function
{
var strict = document.documentElement && document.documentElement.scrollHeight && document.documentElement.scrollHeight > 0;
var toolid, dAttrs = (strict) ? document.documentElement : document.body;
GenEasyToolTips(document.links, this);
GenEasyToolTips(document.getElementsByTagName("SPAN"), this);
//
function GenEasyToolTips(list, output)
{
var x, tip, len = list.length; // find out how many items in list
for (x=0; x<len; ++x) // loop on document links to find tooltips
{
if(list[x].id // link must have an id
&& list[x].id > " " // which is greater than blanks
&& list[x].className // and a class name
&& list[x].className.indexOf(className) >= 0 // containing the specified class name
&& (tip = document.getElementById(toolid=(list[x].id+"_"+className))))
{ // associated tool tip is link id + _className
output[toolid] = new EasyToolTip(list[x], tip); // generate an easy tool tip entry
}
}
output.show = function(tooltip, event) // generic tooltip show function
{
tooltip.style.display = "block"; // show tooltip
var tx = event.clientX + 10 + dAttrs.scrollLeft; // initial tooltip x placement
var ty = event.clientY + 10 + dAttrs.scrollTop; // initial tooltip y placement
var dx = dAttrs.clientWidth + dAttrs.scrollLeft; // current document x max viewable
var dy = dAttrs.clientHeight + dAttrs.scrollTop; // current document y max viewable
if (tx+tooltip.offsetWidth > dx) tx = dx - tooltip.offsetWidth;
if (ty+tooltip.offsetHeight > dy) ty = event.clientY - 5 - tooltip.offsetHeight + dAttrs.scrollTop;
tooltip.style.left = tx + "px"; // final tooltip x placement
tooltip.style.top = ty + "px"; // final tooltip y placement
event.cancelBubble = true; // cancel event bubbling
return false; // skip any other event handling
}
output.hide = function(tooltip, event) // generic tooltip hide function
{
tooltip.style.display = "none"; // hide tooltip
event.cancelBubble = true; // cancel event bubbling
return false; // skip any other event handling
}
}
//
function EasyToolTip(owner, tooltip) // generate an easy tool tip entry
{
tooltip.style.display = "none"; // start tooltip off as non-display
tooltip.style.position = "absolute"; // tooltip will be absolutely positioned
tooltip.style.zIndex = "+2"; // tooltip will float above document content
tooltip.style.left = "0px"; // start tooltip off at document left
tooltip.style.top = "0px"; // start tooltip off at document top
//
this.easytip = tooltip; // save a pointer to the tooltip
if (window.Event) // if there is a static Event object
{ // then event-time event block is passed to handler
owner.onmouseover = new Function("event", "return "+usrObjName+".show("+usrObjName+"['"+toolid+"'].easytip, event)");
owner.onmouseout = new Function("event", "return "+usrObjName+".hide("+usrObjName+"['"+toolid+"'].easytip, event)");
}
else
{ // else event-time event block is global
owner.onmouseover = new Function("return "+usrObjName+".show("+usrObjName+"['"+toolid+"'].easytip, event)");
owner.onmouseout = new Function("return "+usrObjName+".hide("+usrObjName+"['"+toolid+"'].easytip, event)");
}
}
}[/CODE]
Copy linkTweet thisAlerts:
@LeeUFeb 06.2009 — Exxxxxxcellent! Thanks! I'll post it today.
Copy linkTweet thisAlerts:
@LeeUFeb 06.2009 — One thing I did notice: the DIVs holding the tooltips are flashed on the screen for a second or two when the page loads. Anyway to hide that?
Copy linkTweet thisAlerts:
@MrNobodyFeb 06.2009 — Have to hard-code the [B]style="display:none"[/B] in the HTML for the tooltip DIV. I ended up doing this in my sample HTML page, too. I had them that way originally, then thought to remove it and just let the EasyToolTips code do it, but later noticed they were momentarily being displayed. So, I added the hard-coded inline styles back. Like this:
[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
Copyright (c) 1999-2009 - All Rights Reserved
Author: Dave Clark I (a.k.a., MrNobody)
E-mail: [email protected]
Website: www.DaveClarkConsulting.com
Location: Dayton, OH, USA
-->
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Easy DHTML ToolTips</title>
<meta name="author" content="Dave Clark Consulting">
<style type="text/css">
<!--
#link1_tooltip {
position: relative;
width: 150px;
border: 2px solid black;
padding: 5px 10px;
color: black;
font-weight: bold;
background-color: red;
}
#span1_tooltip {
position: relative;
width: 200px;
border: 2px solid blue;
padding: 5px 10px;
color: blue;
font-weight: bold;
background-color: yellow;
}
.fauxLink {
color: blue;
cursor: pointer;
text-decoration: underline;
}
-->
</style>
</head>

<body>

<p>Various page content...</p>
<p>Using <a id="link1" href="http://www.daveclarkconsulting.com/"
class="tooltip">links</a> for Easy DHTML ToolTips,<br>
and using <span id="span1"
class="fauxLink tooltip">spans</span> for Easy DHTML ToolTips.</p>

<div id="link1_tooltip" style="display:none">
<p>Link EasyToolTip content...</p>
<p>Now is the time for all young men
to come to the aid of their country.</p>
</div>

<div id="span1_tooltip" style="display:none">
<p>Span EasyToolTip content...</p>
<p>Now is the time for all young men
to come to the aid of their country.</p>
</div>

<script src="EasyToolTips.js" type="text/javascript"></script>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@kursonauthorFeb 09.2009 — Hi Mr. Nobody.

Thanks much.

hey, regarding: If you'd like one with slightly better features -- such as dynamically acquiring links and spans of a particular class, rather than having to code in-line event handlers in the BODY of the document -- then I can post that one for you to use in your JSS script library.

How may I be able to check that out as well?
Copy linkTweet thisAlerts:
@MrNobodyFeb 09.2009 — It is all posted in this thread, but if you want to see the official entry:

Easy DHTML Tooltips
×

Success!

Help @kurson spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...