PDA

View Full Version : Multi-line tooltip problem using HTML, CSS, and Javascript



Aadreon
Jun 22nd, 2007, 04:06 AM
Hi there...

This is my first post here and actually registered just to seek help with this problem I'm having. I am still relatively new to web developing and so most of the time I try to tough it out on my own and work through alternatives rather than ask stupid questions, but this one is driving me crazy.

I have a website I am making for my MMORPG game's guild and I have a page that I want to use roll over tooltips on images from a sliced table for. I tried the title attribute but it's not not long enough on Firefox to include all the text, plus I want to use my stylesheet to show a nice background color, ect, that match the rest of the page.

First off, this is where I got the explanation of how to do it and it's the code I'm trying to implement into my site: http://www.texsoft.it/index.php?%20m=sw.js.htmltooltip&c=software&l=it

It explains it very well and makes sense to me, so I'm not sure why it won't work on my site; but here is all the pieces of code relatative to it.

From my CSS stylesheet
<code>
.xstooltip
{
visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;

font: normal 8pt sans-serif;
padding: 3px;
border: solid 1px;
color: #FFFFFF;
background-color: #663366;
}

From my javascript document:
<code>
function xstooltip_findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function xstooltip_findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

function xstooltip_show(tooltipId, parentId, posX, posY)
{
it = document.getElementById(tooltipId);

if ((it.style.top == '' || it.style.top == 0)
&& (it.style.left == '' || it.style.left == 0))
{
// need to fixate default size (MSIE problem)
it.style.width = it.offsetWidth + 'px';
it.style.height = it.offsetHeight + 'px';

img = document.getElementById(parentId);

// if tooltip is too wide, shift left to be within parent
if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth;
if (posX < 0 ) posX = 0;

x = xstooltip_findPosX(img) + posX;
y = xstooltip_findPosY(img) + posY;

it.style.top = y + 'px';
it.style.left = x + 'px';
}

it.style.visibility = 'visible';
}

function xstooltip_hide(id)
{
it = document.getElementById(id);
it.style.visibility = 'hidden';
}
</code>

And from my html document, immediately after the <body> tag
<code>
<div id="tooltip_tier1" class="xstooltip">

<b>Found in:</b><br/>
Queen's Colony,<br/>Outpost of the Overlord,<br/>
Forest Ruins, Oakmyst Fores,<br/>
the Caves, <br/>
the Peat Bog, <br/>
the Ruins, <br/>
the Sunken City, <br/>
the Sprawl, <br/> the Graveyard, <br/>
Greater Faydark, <br/>
Darklight Woods.

</div>
</code>

Finally, the part I want the tooltip to show up (from same html document):
<code>
<td><img name="node_table_main_r2_c2"
src="Node_main_images/node_table_main_r2_c2.jpg"
width="86" height="98" border="0"
id="node_table_main_r2_c2" alt=""
onmouseover="xstooltip_show('tooltip_tier1',
'node_table_main_r2_c2', 289, 49);"
onmouseout="xstooltip_hide('tooltip_tier1');"
/></a></td>
</code>

When I test it...nothing. At first I thought maybe the sliced image was too small, so I resliced the table, making it into much larger divisions, but it still didn't work.

Then I thought, maybe it has to do with using it inside a <td> tag... However, just to test it, I did the same exact code (other than swapping the image id) in one of the images from the top navigation bar, which is also a sliced table, and it worked. It's driving me nuts because I see no reason for it to work in one place and not the other when all the elements are the same...

If anyone sees what I am obviously missing...I would be sooo grateful for a hint.

You can also see the page in concern at
http://www.savagefeast.com/Tradeskills/Main.html

I am doing little step by little step, so I know there are other things to be addressed and I will get to them, but I'm worn out on this one...

Thanks,

Aadreon

Aadreon
Jun 22nd, 2007, 04:27 AM
Sorry, first time ever doing this and realized I did the code tags wrong (<code> instead of [code]) ..just wanted to let you know I tried to edit my post and fix that like 3 times and when I hit save it never advanced to next page. I waited for a while...maybe it's a bug?

Sorry about that though...

Philip M
Jun 22nd, 2007, 07:37 AM
Is it this perhaps?

onmouseover="xstooltip_show('tooltip_tier1',
'node_table_main_r2_c2', 289, 49);"

Eliminate carriage return?

I have also found that the edit "save" button does not always work - you need to "Go advanced" which for some reason always does its stuff.

Aadreon
Jun 22nd, 2007, 08:16 AM
First of all, thank you for the reply.

I am not sure what that means though; a carriage return I mean. I looked it up and it said something about a function that sends it back to the beginning?

Maybe I didn't understand the code correctly but I thought that that was the piece of code required to bring the tooltip div into visibility instead of having it at it's beginning state, which is hidden and fixed at top corner of page.

I am definitely willing to try anything that might be a fix, however. Which part should I delete? That whole line?

Thanks again...sorry for being so noobish.

-Aadreon

_Aerospace_Eng_
Jun 22nd, 2007, 08:52 AM
Add this to the top of your page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

It may or may not make the tooltip work properly. Its already working but its appearing further down the page so you don't see it. After adding that your div with the content in it will get scrollbars, it seems you may have some overflow properties applied to it. Not sure why though. Either way you need to validate your HTML. See your coding errors here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.savagefeast.com%2FTradeskills%2FMain.html). You may also want to read the link in my sig titled "Why Tables for Layout is Stupid?".

Aadreon
Jun 22nd, 2007, 09:30 AM
Thanks again...I don't understand WHY it's displaying down so low in the page but I will try to figure that out.

As for the tables being dumb? Never heard that before but I'm reading into it now. It seems everything I read has a differen't opinion of what to use and what not to use. I DID have frames, then found the links inside of them didn't work properly to display a new frameset...

Then I learned abouot <div> tags and am enjoying them...but I haven't found an equivalent for tables for graphically intense layouts... hopefully, your link will lead me to one.

What can I say...I got a couple of books and poked around on the internet and it's a whole lot of trial and error...

I would still like to have a tooltip for that table that works though because I already put so much time into it. I will play with the offset values but I don't know if that will work or how else I might get what I'm looking for.

Do you have a suggestion that doesn't have to link to another page for the additional info I want to show?

Going to bed now...will check again tomorrow. Thank you for your attention.

Aadreon

_Aerospace_Eng_
Jun 22nd, 2007, 09:35 AM
Adding what I told you to add will make the tooltip show in the right place. Try things first please.

Philip M
Jun 22nd, 2007, 09:47 AM
First of all, thank you for the reply.

I am not sure what that means though; a carriage return I mean. I looked it up and it said something about a function that sends it back to the beginning?

Maybe I didn't understand the code correctly but I thought that that was the piece of code required to bring the tooltip div into visibility instead of having it at it's beginning state, which is hidden and fixed at top corner of page.

I am definitely willing to try anything that might be a fix, however. Which part should I delete? That whole line?

Thanks again...sorry for being so noobish.

-Aadreon

A carriage return is a newline and/or line feed character, causing a line break. I am a little surprised that you are not familar with the term, which of course originates in manual typewriters.

What I was suggesting is to change

onmouseover="xstooltip_show('tooltip_tier1',
'node_table_main_r2_c2', 289, 49);"

to

onmouseover="xstooltip_show('tooltip_tier1', 'node_table_main_r2_c2', 289, 49);"

that is, all in one line.

Nabeel
Jun 22nd, 2007, 12:13 PM
Hi, This post is very informative, however I would like some specific information. If someone can help me then please send me a private message. Best Regards,

Pakistan Property (http://www.zameen.com) | Wholesale Suppliers (http://www.dailytrader.com)
Wholesale Canadian Directory (http://www.wholesale-canada.com) | All UK Wholesalers (http://www.uk-wholesaler.co.uk)

Aadreon
Jun 22nd, 2007, 04:14 PM
Thank you Phillip,

I added the line you specified at the top and now it works great. I was wondering if you could give me a short explanation of what that line means and when I should use it? I checked that markup validator (which was very cool, by the way...didn't know of it's existence) and I see it said a line is required at the beginning but I don't know about how to write them... guess my book kind of skipped over that one.

Your replies were very fast and very helpful though. Just wanted to let you know it reallly helped out a lot and I appreciate it.

-Aadreon

_Aerospace_Eng_
Jun 22nd, 2007, 06:47 PM
I'm the one who told you to add that line BTW. That line is called a doctype. Without it browsers render your page guessing where things should go. With it browsers have a better idea of where things should go. Read the sticky for more info: Which Dtd (doctype) to use on page?

Aadreon
Jun 22nd, 2007, 07:28 PM
Thank you and sorry for not thanking YOU in the first place.

I was up very late last night (3 a.m. my time) working on stuff which was probably not the best idea considering I wasn't all there by that time, but I get in a mode and want to get something done or fix something and I just get stupid.

I did, however, learn a lot in one night and thanks to yours and others' posts am a little smarter than I was yesterday.

Take care,

Aadreon

Aadreon
Jun 22nd, 2007, 09:16 PM
Just a note...

I did read the doc type information and that was helpful and I will make sure to include that from now on.

I also read through the why using tables is stupid info and... well I understand why it is not always a good thing, however, I see no way to achieve the look of my site without using them at least occassionally. I did try to give my tables class names defined in my stylesheet document and for whatever reason...it COMPLETELY screwed it up. I saved the changed version and changed css doc just to show someone, if they even feel like looking at what went wrong, but I ended up going back to the original version for now because at least it looks how it's supposed to.

It seemed like when I put the same attributes for <table> or <td> in my CSS definitions that were originally inline attributes in the html document, it just completely disregarded them. The inline attributes seem to always over-write pre-existing attributes, however, when I give a class name like .ContentTblHolder in my stylesheet, assigning text align: left; vertical align: top:, for example, it just ignores it...

I don't get it...

Aadreon

felgall
Jun 22nd, 2007, 09:31 PM
I also read through the why using tables is stupid info and... well I understand why it is not always a good thing, however, I see no way to achieve the look of my site without using them at least occassionally.

Approximately 0.1% of page layouts that can be done with CSS can also be done with tables.
Exactly 100% of table layouts can be reproduced with less code using CSS.

Aadreon
Jun 22nd, 2007, 11:24 PM
Well, like I've said, I haven't been doing this long so I don't know HOW. Like my picture navigation bar - www.savagefeast.com Don't have the slightest clue as to how to do that with CSS. I mean no offense, but when you guys are telling someone who is not nearly as advanced with coding as you are, "don't do that", it's not gonna help them much. I am researching as much as I can trying to learn the best ways to do things, but just telling me what NOT to do doesn't tell me how TO do it...or even where to start.

Sorry if that seems rude, I just get the impression that the answer is supposed to be obvious to me. It's not.

_Aerospace_Eng_
Jun 23rd, 2007, 12:06 AM
For the navigation you can use a div and an unordered or ordered list. http://bonrouge.com/~rollover3 has some good advice on image rollovers.

Check out this site http://css.maxdesign.com.au/listamatic/
It explains a lot of things about lists for navigation. As to your layout. It looks like a simple 2 column fluid layout. http://bonrouge.com/2c-hf-fluid.php

Just because you don't know how to do something doesn't mean you can't teach yourself how. You have to do some research on your own. If you are researching as much as you can "trying to learn the best ways" then you are researching the wrong stuff because from seeing your code it appears you learned all of the wrong ways.