description bubble when hovering over text

Discussion in 'Web Design & Coding' started by ming, Dec 26, 2007.

  1. ming

    ming OSNN Advanced

    Messages:
    4,252
    Location:
    UK
    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 :)
     
  2. kcnychief

    kcnychief █▄█ ▀█▄ █ Political User Folding Team

    Messages:
    16,948
    Location:
    Massachusetts
    I believe it is called hover text, a hover tip or info tip - what language are you coding in?
     
  3. ming

    ming OSNN Advanced

    Messages:
    4,252
    Location:
    UK
    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.
     
  4. AllWeatherGal

    AllWeatherGal Not Just for Fair Weather Political User Folding Team

    Messages:
    253
    Location:
    SF Bay Area
    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.
     
  5. ming

    ming OSNN Advanced

    Messages:
    4,252
    Location:
    UK
    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.
     
  6. kcnychief

    kcnychief █▄█ ▀█▄ █ Political User Folding Team

    Messages:
    16,948
    Location:
    Massachusetts
  7. AllWeatherGal

    AllWeatherGal Not Just for Fair Weather Political User Folding Team

    Messages:
    253
    Location:
    SF Bay Area
    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.

    HTH

    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!