Tooltip help - donkey at the controls!!!

[Sliight]

1) Script Title: Cool DHTML tooltip2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...mltooltip2.htm

3) Describe problem: I know this is silly, especially how far I've come on my site but...

I dug around on the web and encountered something that looked like it would work... I used this code: <a href="javascript: void(0)" ONMOUSEOVER="ddrivetip('a pre-payment penalty is a penalty you generally pay if you pay off your mortgage before a set period of time')";
ONMOUSEOUT="hideddrivetip()">pre-payment penalties</a>

The javascript: void(0) appeared to be the key. I'll just leave this up in case someone else happened to run into an issue wanting a tooptip without a link. Thanks!!!

I can't seem to create the proper element to make a mouse over tooltip for what I want.

Basically I want the words " prepayment penalties " to show this tooltip on mouseover: a pre-payment penalty is a penalty you generally pay if you pay off your mortgage before a set period of time.

I copied the text exactly into the head, and placed the body script right before the </body> tag.

I made it work now using this...

<p>"A" paper, Alt-A, and Subprime loans offer nearly all of the same loan programs. The most common difference is higher or lower rates,
and <a href="" ONMOUSEOVER="ddrivetip('a pre-payment penalty is a penalty you generally pay if you pay off your mortgage before a set period of time')";
ONMOUSEOUT="hideddrivetip()">pre-payment penalties</a>.</p>

The only problem now is that it's an href, and even though it hasnothing in the "" it still defaults back to my home page. Now I just need to lose the link portion somehow.

Any ideas? I have a feeling it's simple, and I'll slap myself in the head when I hear it.

Btw I took actual source code from the tool tip page and inserted it. It does work, but so far only with the linked object, and I don't want it to link to anywhere.

Thank you!!!!

[jscheuer1]

How about:

<span onmouseover="ddrivetip('a pre-payment penalty is a penalty you generally pay if you pay off your mortgage before a set period of time');" onmouseout="hideddrivetip();">pre-payment penalties</span>

If you want the text to appear a different color, and/or underlined, etc., you can add style to the span.

[Sliight]

It now works, and I think I'm ok with the text being the same color as the anchored table of contents, however I do have two new questions.

Here is the code I am using:

<a href="javascript: void(0)" ONMOUSEOVER="ddrivetip('reserves are accessible money, either from a bank account, or possibly retirement. Banks sometimes want to see that you have 2 to 6 months of mortgage payments accessible to you. This money is just in case something happens, they know you can make your payments.')";

First, I added this to the end ... payments.' 600)";
I did this to try and make the text box larger, to fit all the words with a better appearance. It gave me an error on the page.

Second, can I cut the code in half to another line? I hit enter to make it all appear on my HTML editor visually, but I ended up receiving an error by doing this. Do I just need to have some SUPER LONG lines in my code?

Thank you!

[jscheuer1]

You need a coma after the text and before the number representing the width:

 . . . payments.', 600);"

Also, the semi-colon belongs where I put it, the way it is on the demo page is a typo, though this generally will not hurt anything. Except, possibly when you go and try to split the line. With the semi-colon in the correct place, you should be able to substitute a line-break for a space between attributes. And/or, you could possibly concatenate the string over two or more lines using a closing delimiter, a plus sign, and then an opening delimiter on the next line:

<span 
onmouseover="ddrivetip('reserves are accessible money, either from a bank account, or possibly retirement.  '+
'Banks sometimes want to see that you have 2 to 6 months of mortgage payments accessible to you. This money '+
'is just in case something happens, they know you can make your payments.', 600);"
onmouseout="hideddrivetip();">Blah</span>

However, the safest way is to use a 'really long line'. The line (if written in your source as one long line) is nowhere near the limit of what is allowed.

[Sliight]

Cool thank you. I'll just use the long lines. I actually broke down each line so that instead of being mid paragraph, the tooptip started on it's own line.

I'll try the sizing thing now.

Thank you!

[Sliight]

Just in case you want to see how my website is developing with the help a few key people have offered me here... http://www.usejeff.com/mort1.shtml

I appreciate the nudging in the right direction on most cases, and definitely appreciate telling me to add a comma or something here and there. Something that would have taken ages to find on my own.

Thank you!!!!

[jscheuer1]

Using the:

href="javascript:void(0)"

can cause problems sometimes in some browsers, most notably IE. This is because, when clicked, it signals to the browser that the page may begin to unload. This will stop gif animation (if any) on the page and possibly adversely affect other scripts.

You would be better off using the span and styling it:

<span class="mytip" onmouseover="ddrivetip('Whatever text for this tip', 250);this.style.textDecoration='underline';" onmouseout="hideddrivetip();this.style.textDecoration='none';">activating text</span>

Then in your style sheet:

.mytip {
color:#0000fe;
}

[Sliight]

Can I always use the same class for every tip then? It's not a bad thing to be able to tweak the tip appearance with CSS by any means. I just don't want to have to create a new class name for every single tip.

Also I'm pretty happy just letting the parent document control everything, I would probably just tweak the color. What is the least amount of code I can get away with? Would this work?

<span class="mytip" onmouseover="ddrivetip('Whatever text for this tip', 250);"
onmouseout="hideddrivetip();">activating text</span>

It's silly for me to ask, as I am just going to try it. I am however mostly concerned with if it will cause problems, as you said the javascript void would. Can I use the example posted above, and expect no problems from browsers?

Thank you!

[jscheuer1]

That's what the class selector is for, selecting an entire class of elements. In other words, yes. You only need one class, this may be used with all of your tips. However, you cannot have hover effects for a span (or anything other than a link) in css in IE 6 and earlier (works fine in IE 7 and other modern browsers). But, since you are mousing over and out of the span to to activate the tip anyway, a class change could be made in the script:

function ddrivetip(el, thetext, thewidth, thecolor){
if (ns6||ie){
el.className=el.className+'over';
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

and:

function hideddrivetip(el){
if (ns6||ie){
el.className=el.className.replace(/over$/,'');
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

The tip would look like:

<span class="mytip"
onmouseover="ddrivetip(this,'Whatever text for this tip', 250);"
onmouseout="hideddrivetip(this);">activating text</span>

and in your stylesheet:

.mytip {
color:#0000fe;
}
.mytipover {
color:#0000fe;
text-decoration:underline;
}