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!
BonnieeLee(: said…
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!!!!

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

Where's The Dashboard?

We see this confusion, a couple times a week, in Blogger Help Forum: How Do I? . Where is the dashboard? In the Classic Blogger GUI, the display which contained the "Blog List" (at the top), and the "Reading List" (at the bottom) was labeled "Dashboard". Many people also called the "Settings" / "Template" screens for the various blogs, linked from the Blog List, the dashboard. The New Blogger GUI has no page with the label - and no links "To The Dashboard". The Navbar (another unlabeled feature) has two links - "Design" and "New Post" - which lead to different dashboard sections, when you are appropriately logged in to Blogger . And, the "B" logo at the far left of the navbar will, similarly, take you to the Blog List / Reading List.

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?".

What Is "" vs. ""?

With Google Domains registered custom domains becoming more normal, we are seeing one odd attention to detail, expressed as confusion in Blogger Help Forum: Learn More About Blogger . My website uses "" - am I supposed to use "", instead? It's good to be attentive to detail, particularly with custom domain publishing . This is one detail that may not require immediate attention, however.