I have received a number of queries from users of the Dreamweaver web editor about how they can get a tool tip window to pop up when their mouse hovers over the images displayed on their web page. This article not only answers that question but also deals with the related question asked by a few people about why the ALT text, or alternate text, does not seem to appear for their pictures even though they have set it. Although the latter group of people did not explicitly say it, they were actually asking the same question, making some mistaken assumptions along the way.
Before I go on, let me clarify that the ALT text, or alternate text, for a picture is not what gives you the tool tip window. As I mentioned in my Dreamweaver chapter on How to Add Images to Your Website in Dreamweaver, the "ALT text" or "Alternate text" for your image is a textual description of what your image contains. It is basically intended for people who don't use graphical browsers and depend purely on text (such as the blind), as well as search engines (which are for all intents and purposes, blind too).
Notice carefully what I just said above. The ALT text is for people who surf with text-based browsers, not the usual browser that the person asking this question is using. If you're using Internet Explorer, Firefox, Opera, Safari, Chrome, etc, you will not be able to see the ALT text, since all you will see is the picture.
Yes, you read that correctly. If you can see the picture in your web browser, you will not be able to see the ALT text. If your intention is really to see the ALT text, for example, to check whether you've set it correctly, your best recourse is to disable the display of all graphics in your web browser. (The method to do this varies from browser to browser, and is beyond the scope of this tutorial; it usually requires you to go to the "Options" or "Preferences" menu in the browser, and look for some setting to turn it off.) The browser will then show you the alternate text in the place where the images go.
For those who have been wondering what this "tool tip window" thing is, move your mouse cursor over thesitewizard.com's logo at the top left corner of this page. If you are using a graphical browser (and chances are that you are, for the majority of readers), you should be able to see a small window pop up with a very brief statement summarizing the overall purpose of thesitewizard.com.
Contrast this message with the ALT text for that image. My logo's ALT text merely says "Logo for thesitewizard.com". Since the ALT text is primarily meant for the blind, I simply use it to tell them what the picture contains.
The popup window, referred to by some as a "tooltip window", is actually implemented using what is known as a TITLE attribute. The TITLE attribute, like the ALT attribute, is actually an accessibility aid for your web page. It is provided so that your website can be used by people who have some sort of disability, like visual impairment (blindness) and so on.
For images, the TITLE attribute is mostly redundant, since images have the specialized ALT attribute for such purposes. (In case you're wondering why there is a TITLE attribute then, it's because the TITLE attribute is a general attribute available for many types of things appearing on a web page, not just images. Images just happen to be in the list of things that can have a TITLE.)
As you have noticed, the TITLE attribute is implemented in many browsers as a tool tip window. If it's present for an image, most graphical web browsers will pop up a little window displaying the TITLE text. Note that this display of the TITLE text as a tool tip is not guaranteed. There's nothing in the HTML standards that require web browsers to display it as a tool tip. It's just a practice that is widespread, not one that is mandatory.
Since there are 2 types of attributes providing the same feature, I implement them for slightly different purposes on my sites.
I use the ALT text exclusively for accessibility purposes. That is, the ALT text is to inform the blind what the picture is about. Hence for my logo, it merely says "Logo for thesitewizard.com".
I take advantage of the fact that browsers typically display the TITLE text as a tool tip window to use it as a sort of optional caption for my pictures. They are especially useful for images where it may or may not be immediately clear what it is supposed to show. You can see them used in this way for the screenshots in my main Dreamweaver tutorials.
For my logo, where I don't really need a caption, since a logo doesn't need one, I decided to make it give a brief description of the site. The plan was that visitors can simply hover their mouse over the logo to find out what the site is about. (Okay, so it wasn't one of my brighter ideas.)
You are not obliged to use the attributes the same way I did, although it's best that, if you do use them, you keep to the spirit of their purpose as I have done, that is, to explain the picture. Another thing that you should remember is that the appearance of the tool tip window is not guaranteed, nor is your visitor certain to hover his/her mouse over the picture, so if you think that your picture desperately needs a caption, you should put it in plain sight under the picture rather than depend on a tool tip that may or may not appear.
Finally, for those who are already feeling increasing stress worrying about what to write for their TITLE attribute, let me assure you that the TITLE text is completely optional. You don't have to bother with it. If you already have an ALT text set for your images, and you have nothing more to say about that picture, don't bother with the TITLE text. This tutorial is meant only for those who want it. You are under no obligation to use it, and will lose nothing by not setting it. (You should however set your ALT text for the benefit of your blind visitors.)
Just so that it's clear: the rest of this tutorial deals with how to set the title attribute using Dreamweaver. It assumes you already know how to use the Dreamweaver web editor to design a web page that includes images. If this is not true, I recommend that you start by reading chapter 1 of the Dreamweaver Tutorial.
On the other hand, if you're an absolute newcomer to website creation, please go to the How to Make / Create a Website: The Beginner's A-Z Guide instead. The guide will not only take you step by step through the whole process, it will also answer questions about starting a website that most beginners ask (even those you didn't know you should ask).
Start up Dreamweaver and load the page containing the image where you want the title attribute.
Right-click once on the image in question. That is, click your right mouse button when your mouse cursor is hovering over the image.
A menu should appear. Click the item "Edit Tag <img>..." on that menu.
A dialog box with the title "Tag Editor - img" will appear. In the left column, click the "Style Sheet/Accessibility" line.
Enter the message you want to appear as a tool tip in the "Title:" field on the right side of the dialog box.
Click the "OK" button.
Save your page and publish it in the usual way.
To test your title attribute (or tooltip window), start up your web browser and load the page. Hover your mouse over the picture to see how the tooltip appears in that particular browser. Note that you cannot test the absence or presence of the tool tip within Dreamweaver itself, since Dreamweaver is not a web browser. You'll need to test it in your browser.
Remember also that the tooltip window itself may be displayed differently in different browsers. As I mentioned earlier, there's no rule that says browsers need to present the TITLE as a tool tip, nor is there any rule governing how they should display your text in the tooltip. In other words, don't kill yourself over this. If it works the way you want it to, that's great. If it doesn't, just move on to more important things.
Copyright © 2009-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Pop Up a Tool Tip Window for Your Images Using Dreamweaver
