XHTML/CSS Tooltips & Popups

Note: Most of the links have been removed from this page.

Although popups have been scorned because of their commercial overuse, they can play a useful role in your web sites. Similarly, tooltips provide useful information when a visitor hovers over something in a web page tagged as a tooltip.

When you complete this unit, you will:

• Understand why popups have gotten bad press.
• Know how to set up an environment for popups.
• Be able to create a popup.
• Be able to modify popup format in the popup code.
• Understand the usefulness of tooltips.
• Be able to create a tooltip.

Tooltips

Tooltips don't have the bad PR that popups have (that I know of) and are quite useful. Imagine you are a French teacher; you want students to read a short story online. You can use tooltips for the French words they are unlikely to know.

Note: This unit is based on https://www.w3schools.com/css/css_tooltip.asp

1. Open up a new web page file.
2. In the head area of your page, insert these CSS declarations:
   
   <style>
   .tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
   }
   
   .tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   
   
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
   }
   
   /* Show the tooltip text when you mouse over the tooltip container */
   .tooltip:hover .tooltiptext {
   visibility: visible;
   }
   </style>
3. Insert this text (from Emile Zola's L'Œuvre) into the body of your page:
   Claude passait devant l'Hôtel de ville, et deux heures du matin sonnaient à l'horloge, quand l'orage éclata. Il s'était oublié à rôder dans les Halles, par cette nuit brûlante de juillet, en artiste flâneur, amoureux du Paris nocturne: Brusquement, les gouttes tombèrent si larges, si drues, qu'il prit sa course, galopa dégingandé, éperdu, le long du quai de la Grève. Mais, au pont Louis-Philippe, une colère de son essoufflement l'arrêta: il trouvait imbécile cette peur de l'eau; et, dans les ténèbres épaisses, sous le cinglement de l'averse qui noyait les becs de gaz, il traversa lentement le pont, les mains ballantes.
   
   Note: Take a look at the source of this French text to see how the accents and tildes are handled.
4. Here's how to mark up a French word for a tooltip:
<span class="tooltip">l'orage<span class="tooltiptext">storm</span></span>


5. Now, use tooltips to provide definitions for the following words:
   

   l'orage	storm
   flâneur	wandering
   essoufflement	breathlessness
   dégingandé	arms dangling

6. Do a refresh to see how your page has changed, then upload this page to your home page for this course.

Note: The CSS resource on tooltips provides many variations you can use to make the tooltip look the way you want. See the link above.

Popups

Popups have a bad reputation because they have been so heavily used for advertisement. However, they can be useful for non-advertising situations. For example, as an instructor I pop up a list of student e-mail addresses so that I can send them my thoughts on their projects.

At https://www.w3schools.com/howto/howto_js_popup.asp w3schools.com provides a wealth of details on how you can finetune and enhance your popups. However, we are going to take a much simpler route!

1. Open up a new web page file.
2. Insert some text in the body of your page.
3. Find or create something you'd like to pop up: either a text file or a graphic.
4. Find a word or phrase in your text to enclose within these tags: <a href="" OnClick="hold=window.open('your_file', 'Window', 'menubar=no, scrollbars=yes, width=550, height=400, screenx=1, screeny=1'); hold.focus(); return false;"> and </a>
5. Replace your_text_or_graphic with the name of your text or graphic file. Between the two parts of your popup tags, place that word or phrase that will have a link.
6. Do a refresh to see if your popup works.
7. You'll want to change the width and height values to fit your text or graphic. Experiment with yes/no values for menubar and scrollbar.
8. Do a refresh to see how your page looks.

Practice

For this unit, create a web page with at least one tooltip and at least one popup:

1. Create a basic XHTML page.
2. Find some text to use for tooltips, text that could, for example, apply definitions to key terms.
3. You do not need to send the standard_tooltip.js file, but you do need to copy the reference to the tooltip.js at the bottom of the page you create.
4. For the popup, find some text (and image) to use in the popup. Copy the popup tagging into another web page.
5. Name your HTML file with some identifying part of your name followed by _popups.html, for example, davidmc_popups.html.
6. Send your web pages by e-mail attachment to your instructor at admin@mcmassociates.io. Your instructor will review, point out any problems, enabling you to revise and resend.

Return

Return to your bookmarked course main page.

Related Information

You can take tooltips and popups a lot further with these w3schools.com resources:

• https://www.w3schools.com/howto/howto_js_popup.asp
• https://www.w3schools.com/css/tooltip.asp
• JavaScript Language Tutorial. Provided by Tutorials Point, India, 2015.
• Webmonkeys JavaScript tutorial. JavaScript examples plus links to jquery, Univ. of Illinois, 2011.
• JavaScript Quick Reference Card. Provided via Univ. of Idaho, 2008.
• Introduction to page composition with CSS. Shinyu Murakami, 2008.
• Lecture 10—Ajax and jQuery. Rob Capra, UNC, 2013.

Information and programs provided by admin@mcmassociates.io.