How to add alt text to

Adding ALT text to websites.

Adding floating text to images - tool tips - TITLE="TEXT"

You fancy some floating text when the mouse hovers over the image

Some floating text appearing when someone hovers their mouse over one of your wonderful images sounds like a nice touch.

But how do I do it?

If you managed to add some ALT="TEXT" using custom HTML, then this is even easier.

Getting the ALT="TEXT" sorted first is a good idea and makes the floating 'tool tips' easier to enter.


This is what we will end up with

Hover the mouse over the image to see if your browser displays title="text", you should see the words "This is a floating tool tip".

 This is an image

If you just see "This is an image", then maybe its time to upgrade your browser, try firefox

Download: Fast, Fun, Awesome

Great. Now you know what you want.

Lets show you how to get these smart looking floating tool tips for your images.

If you have already added the ALT text attribute in Custom HTML, then this is just a simple edit of the HTML you added earlier. If you have not read the bit about adding the ALT attribute in Custom HTML, read it now, its very 'step-by-step'.


Open your site in the webs site builder. Choose EDIT WEBSITE and select the page you want to edit.

The webs SITE BUILDER editor now shows grey boxes where your photos used to be.

Like these: </HTML> widget place holder image


Thats fine, the grey box is just showing you there is some Custom HTML associated with the image. We will need to edit that HTML (only a little bit) to get the floating tool tips to show up.

Edit the existing Custom HTML from the ALT="TEXT"

Click on the grey box to select it. You may need to click more than once, and pause between clicks.

What you should see is THIS:


 Image of widget placeholder

Note the three icons on the top left of the grey box, they are a pen, a bin and a magnifying glass. If you don't have the three icons, try selecting the widget (grey box) again, click then wait, then click again if necessary.

Click on the pen

Clicking on the pen will open up the CUSTOM HTML editor, we have seen it before, and looks like This:

 Custom HTML Showing ALT= atribute

Your CUSTOM HTML will look similar, but the "http://xxxxx/" will be different, there will be some clever and useful text between the " " after the alt= and your width and height will reflect the size you want the browsers to display the image.

Tool Tips HTML title="floating tool tip"

OK, here goes.

You need to add this


 title="This is a floating tool tip"


into the HTML. Place it after the alt="This is an Image" and before the width="YYY" 

The text This is a floating tool tip is only my example, you can have anything you like, but knowing you, its going to be witty and clever while keeping short and to the point.

Here is a Before and After image

Custom HTML showing alt="This is an image"

 Custom HTML showing alt='This is an image'


New Improved Custom HTML showing alt="This is an image" AND title="This is a floating tool tip"

Custom HTML box with alt= and title=

Before and After for my Example Image

Custom HTML showing alt="This is an image"


 <B><img src="" alt="This is an Image" width="200" height="100"></B>



New Improved Custom HTML showing alt="This is an image" AND title="This is a floating tool tip"


 <B><img src="" alt="This is an Image" title="This is a floating tool tip" width="200" height="100"></B>



Note there is a space between alt="this is an image" and title="This is a floating tool tip" and width="200" and height="100"

Well Done! Make sure you publish your site and then sign my Guestbook to post a link of your improved website.