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.

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.

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.