description bubble when hovering over text


OSNN Advanced
Hi all,

Got a question about web page design. I'm not into Web designing at all, but would like to know how some web site such as this forum's new page display text/description bubbles when you hover over certain texts.
Could anyone give a dummies guide to how to do this and what tools are required, please?

Much appreciated :)


OSNN Advanced
I believe it is called hover text, a hover tip or info tip - what language are you coding in?
As I mentioned I'm not into these web designing stuff so I'm a total novice. I guess it's english... just kidding. :p I believe all the pages contain only html codes. Haven't a clue if there are anything else hidden within it.

Oh, pages will be edited using standard GUI view rather than the coding view.


Not Just for Fair Weather
Political User
Tooltips are programmable helper info bits ... if you're looking at straight html and the little text pops up when your cursor is resting on a graphic, that's the alt attribute of the img src tag.

For example the following html < img src="photo-of-cat.jpg" alt="Photo of a Cat" >
results in a a cat photo that, when you put your cursor on it, shows the text Photo of a Cat.

Also noted that you said "edited in standard GUI" ... whose? All of them should have a textarea or field for alt.


OSNN Advanced
I'm using Dreamweaver software to do all the editing. I don't look at the html source codes because I don't understand how it works.


Not Just for Fair Weather
Political User
I'm using Dreamweaver software to do all the editing. I don't look at the html source codes because I don't understand how it works.
In Dreamweaver MX 2004, anyway, ...

1. drag/drop the image onto your page

2. click the image
You know the image is selected when <img>
is highlighted in the status bar at the bottom of the design pane.
(You can also click the <img> on that pane to select the graphic)

3. in the properties box (default location is the bottom pane)
you'll see all the attributes you can set for an image, including a field
labeleld "Alt" (in MX 2004, it's the top row, third field from the left:
w |-------| Src |--------| Alt |------| Class |-------|

4. Put your cursor in the field and type the text that you want to show
when users put their cursors over the image.

Note: You can't put line breaks in the alt text or make any font or color changes.


Having written all that, DreamWeaver is a GREAT tool to help you learn HTML, which I advise for anyone doing any web design or development. I find it faster, actually to make edits in the html than the gui boxes when I want to change a bunch of things. About the only things I use the gui for are making complex tables (tho it's still easier to tweak pixels by typing than trying to drag bars) and Templates. Oh my god, TEMPLATES rule!

Members online

No members online now.

Latest posts

Latest profile posts

Perris Calderon wrote on Electronic Punk's profile.
Ep, glad to see you come back and tidy up...did want to ask a one day favor, I want to enhance my resume , was hoping you could make me administrator for a day, if so, take me right off since I won't be here to do anything, and don't know the slightest about the board, but it would be nice putting "served administrator osnn", if can do, THANKS

Been running around Quora lately, luv it there
Electronic Punk wrote on Perris Calderon's profile.
All good still mate?
Hello, is there anybody in there? Just nod if you can hear me ...
What a long strange trip it's been. =)

Forum statistics

Latest member