Monday, November 05, 2007

Make A Popup Text Window

Occasionally in your posts, you might want to add a quick popup window, explaining some concept in slightly more detail. The normal technique to add detail to an article, beside simply writing more text (D'ohh), would be to write a separate post, and link to that post.

But there's a quicker, more elegant way to do this. And you don't end up with another window, as the link above for "link to that post".

Check it out. Hover your cursor over the words "a quicker, more elegant way" above.

It's not hard to code.
But there's <a title="This is quick, and easy to do!">a quicker, more elegant way</a> to do this.


We can add a popup in text, or we can attach it to a picture.

Like everything here, there are details to consider, which may or may not matter to you. Compare the words "link to that post" with "a quicker, more elegant way" - do you see the colour differences? The former is a link, and may (depending upon the CSS rules in the template) have different values for an unfollowed vs a followed link. The ability to show the reader a link in a different colour, based upon whether he has or has not clicked on a link to that specific web page, is a neat feature with HTML.

The latter example above, "a quicker, more elegant way", isn't a link, so it doesn't show any colour difference. It makes the text look cleaner. But with no colour difference, how do your readers know where to hover the cursor?

So add just a bit more code. Look at the example above - "where to hover the cursor".
But with no colour difference, how do your readers know <a title="Hover the cursor here!" style="color:#5588aa; text-decoration:none;">where to hover the cursor</a>?


Next, let's add a bit more text, and see what the limitations are here.

This doesn't work in all browsers - Internet Explorer V6 didn't support the "title" tag - the "alt" tag has this function. Other browsers, that use the same engine, may or may not support this. But its does work for Firefox, and for Internet Explorer V7.

And, there are limitations. Check out "add a bit more text" (above), and see if you can spot one.

If you're in any way curious about how I setup this page, and showed the HTML so neatly, see my tutorial on anchors and HTML. And you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.

>> Top

12 comments:

Treela Blue said...

The mouse over effect results in a flashing message on my computer (is it my browswer perhaps?). Even the examples provided on this page do not stay steadily on the screen. I would like to use this but when it blinks on an off, no one could really read what i put in the message. Can anyone help? I'm using IE 7, so I guess that could be it.

Chuck said...

Treela,

It looks OK in IE V7 here. I'll poke around, and see if I can find any other reports of this being a problem. Do you have any add-ons in your browser?

Treela Blue said...

Chuck, I don't think I have any additions installed. I don't remember installing any. I asked a friend to view my blog on another computer and she said the mouseover window does open for longer than mine but still doesn't stay open very long. Maybe it's just a feature of the mouseover? I'm not sure how long it's supposed to stay open. I may have to find another way to do what I want.

If you find anything out, that will be great! Thanks!

Márcia W. said...

Chuck,
I tried and it works beautifully. I wonder if it is possible to put the title tag in a way that a picture is still clickable ?
Regards,
Márcia

Chuck said...

Márcia,

A mouseover popup for a clickable picture works for me, and you can see it in my demonstration.

Márcia W. said...

Chuck,
thanks a lot for you prompt reply!
I will read and try to read your instructions carefully. Have to confess I´m having lots of unw with this pop-up things.
see you around in the bloggosphere!

mickeymousey005 said...

Chuck,
I appreciate all the help and i would love to do this but where do i put these codes for it to work?
Your help is well appreciated!
Thanks so much!
You make blogging a breeze!!!!

Sincerely,
Taylor!

Chuck said...

Taylor,

There are 2 explicit examples of where to put the codes, in the post. Plus, there are two more examples, in the text, not explicitly shown.

Plus, see the note at the end of the post, and examine the code behind the post.

Yvonne (Uma) said...

I put a whole paragraph in to pop up but when I hover it only lasts a few seconds - not enough time to read. Is there a way to make it stay up longer? Also to make the font larger? How fancy can I get - can I put a background image to the text? THANKS!

Chuck said...

Yvonne,

What you see is what I know. I have not found any options, either. It's just a very simple popup box, containing text. Different truncation for Firefox and IE, too.

poohgal said...

Hi. Thanks for the great tip! It's really helpful. I would like to ask you if it's possible to make a popup picture window with html?
For example, when I hover over a word, a small image relating to the word will be displayed in a small popup window.

Thanks in advance.

puluth® said...

wow, nice one, thanks for sharing MR.chuck.