Skip to main content

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.

It is helpful, if the "hover caption" differs in colour.
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?

Add a bit more code, and make the "hover caption" stand out.
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>?

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

This may not work, in some older browsers.
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.

Here's a few references, and details.
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.


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.
Nitecruzr said…

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…
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 ?
Nitecruzr said…

A mouseover popup for a clickable picture works for me, and you can see it in my demonstration.
Márcia W. said…
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!
Nitecruzr said…

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.
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!
Nitecruzr said…

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.

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.