Hi,
You probally know about the title= thing you can put into some tags, for it to display a small comment in a yellow-ish box (by default). For example:

<h3 title="Comment Box">Hover This</h3>
<img src="someimage.png" title="Comment Box"/>

Lately I have been working a bit more with these, they are a good way to show some aditional info (heh, thats their aim afterall).
Unfortunately (with my knowledge) I can't insert html code into such a Comment Box, not even something as simple as <br> . When I put code into title= it only displays the code and I can't linebreak it. And also if I put too much text it's cuts some part of the text.

What I needed to know is how to create a comment box with multiple lines (the only thing I need are linebreaks). I have some basic HTML, CSS and PHP knowledge, Im sure that PHP won't do the job, but I don't know if Html/Css is enough for this or if I need Java. Can anyone help me out?

Thanks in advance;
Schimassek...

the title attribute should only really be added to anchors. You have it there on a <h3> heading. Why would anyone hover on that anyway?

Also title tags don't go in img tags. Only the alt attribute does.

Originally Posted by alecrust

the title attribute should only really be added to anchors. You have it there on a <h3> heading. Why would anyone hover on that anyway?

Also title tags don't go in img tags. Only the alt attribute does.

It's not a public site where I want to put it, it's some kind of Database Work Tool for the game I am creating. And in some places I have few space so I put some data in comments, in most of the cases it's:

<td title="comment"></td>

Also I work with title tags on pics to have the comment being shown always, from what I know the alt="" is just to display an alternative text in case the image can't be loaded.
Well, forget the <h3> example, I use it only on <td> and <img>.

Schimassek...

PS: I don't bother about cross-browsing, what I am using is Firefox

Originally Posted by InfinitySchima

PS: I don't bother about cross-browsing, what I am using is Firefox

It doesn't matter what you're using. It's what your users are using.

The fact is you can't just shove in a title attribute in any old tag. It may work in some browsers but it's simply not meant to be there. It's not correct.

It is not incorrect, in fact, the title attribute is what you SHOULD use. IE incorrectly uses the alt attribute as a 'tooltip' and it shouldn't.

The title attribute

This attribute offers advisory information about the element for which it is set.

Source: The title attribute.

The title attribute can be used with all elements except for base, basefont, head, html, meta, param, script, and title, but it isn’t required for any. Maybe that’s why it’s less clear when to use it.
Use this to provide additional information that is not essential. Most visual browsers display title text as a tool tip when the element is hovered over, however it is up to the browser manufacturer to decide how the title text is rendered. Some will display the text in the status bar instead. Early versions of Safari did this, for instance.

You can read the rest here: http://www.456bereastreet.com/archiv...le_attributes/

Having to work around the flaws in IE is frustrating but for the time being necessary. Until Firefox takes over that is =)

Originally Posted by alecrust

It doesn't matter what you're using. It's what your users are using.

Hmm, you may be misunderstanding me, that page where I want to insert the tool tip is not meant to be accessed by the people, it's just me.

Thanks LadynRed, I have read the pages but unfortunately it still doesn't answers my problem.

It seems like it's not possible to create a tool tip with multiple lines (and not cutted text) just with HTML. This may go off-forum, but could anyone help me creating one with Java or whatever is best suited for it. I'm still a newb at Java and Object Oriented Programming (not very surprising for my age ^_^ ) but if I manage to get the basics I'm able to do things like css-styling and others....i guess

Schimassek...

You might want to look into something like ThickBox or CSS popups.

http://jquery.com/demo/thickbox/
http://meyerweb.com/eric/css/edge/popups/demo.html

I saw and read those both throughly. Thick Box was nice, but wasn't sooo apropriated for my need as I just wanted a simple comment. But then CSS popups was my key to resolve this problem, thanks a lot.

I showed me how a message could change in a certain spot, it .....still.... wasn't exactly what I wanted so I let my creativity out and played a bit with CSS. After about half a hour I got out something very nice working in Firefox. I might send the code. Big part of the credits go to meyerweb.com

first my css file (part of it, the important part)

td.hidden { border-style: hidden;
            border-width: 0px;
            margin: 0px;
            padding: 0px;
          }
span { display: none;
       position: absolute;
       background-color: #FFFFF5;
       border: solid 1px #333333;
       text-align: left;
       padding: 3px;
       margin-top: 15px;
       margin-left: 15px;
     }
td.hidden:hover span { display: block;
                     }

than each td has:

<td class="hidden">an image or text<span>This sort of comment box<br>support multiple lines<br>and you could even display pictures</span></td>

you can also get this working on <img> instead if you put it inside the <td> and with no text, or change it so you have to click on the "image" for the comment to appear: "td.hidden:active span".

Unfortunately, theres a small problem with cross-over, as IE doesn't recognizes pseudo-classes for <img> and <td>, it does not display the span (maybe there could be a chance if you wrap the <img> between a <a>, but I never tested this)

maybe you have also notived that I didn't put "top: xxx; left: xxx;", this was made to get the position of the box dinamically. It will display usually right below the <img> (or <td>), and with margins you can adjust it (something like relative positioning but without using space )

This would be great if there would be a way to display it on IE.

Schimassek... (tested the code on FF and just worked fine)

There is a way to make it work in IE
IE will not hover on anything but the <a> tag. Soo.. you need a bit of script in an .htc file to do that. Try this:
http://www.xs4all.nl/~peterned/csshover.html

I have read this, but could understand well how exactly I add this. Mostly because I never worked with JavaScript, the only thing I have done with it was refreshing certain frames. Theres also a part where it says it doesn't work with dinamically added tags: Also, the script currently only runs onload; meaning that dynamically added html elements that should have hover behavior will not get it. Apart from that it should simply do what it's intended to do.
What are dinamically added tags? Are they for example html code inside some for loops (loops from Php)?

Schimassek...

You don't have to DO any scripting at all. You put the .htc file in your directory with the rest of your files. You add the behavior rule to your CSS for the <a> and the scripting is already done for you.

Dynamically means generated on the fly, usually with javascript or other scripting language. Doesn't look to me like you're doing that at all.

Thanks a lot, I got it working now. At first IE didn't recognized "img:hover" but then with "a:hover img" it worked fine ^^. this is a great method to add such pop-ups to my site without needing to use javascript, which some people may have disabled.
This forum is really the best
When my Browser Game comes out I might post it somewhere here on an appropriate forum =).

Schimassek...

PS: Just one last question. Is it possible to do it in IE on <td> or <img> tags without needing to add an anchor?
Hope someone reads this, heh. I wasn't sure if I could double post to bump ths topic.