Popup Comment Created by Cursor Hover or Click

Am I a Blind Man in a Dark Room Seeking a Black Cat That Isn't There?

[peted]

On a webpage I want to associate a comment or explanation with a word or phrase. The two best examples of what I'm talking about occur (1) in most of the MS applications "Help/Index" areas, where one can click on a broken underlined word and get a popup tutorial in a very small frame, and (2) in MS Excel where one can create a "comment" or note associated with a particular cell, and the comment or note appears when one places the cursor over that cell. It seems to me that winning the PowerBall lottery jackpot would be easier than finding some guidance on how to incorporate these features into a website! Is this so transparent I am missing something? Obviously some sort of a hyperlink is involved, but I can get nowhere in my research on how to create these in my website. No need to state the obvious, but I'm a neophyte. Is there a word or phrase used to characterize these features, that would facilitate my research? I would appreciate any pointers! I have FrontPage 98, but its manual seems to exclude all the goodies like this.

[encyclo]

Welcome to WebmasterWorld [webmasterworld.com], peted.

You don't need a link, it sounds as if you just need the

title

attribute to add a tooltip. A couple of examples:

Tooltip associated with a word:

<p>This is a sentence with a <acronym title="Your title text here">word</acronyn> highlighted.</p>

Tooltip with a link:

<p><a href="link.html" title="Your title text here">A highlighted link</a></p>

Tooltip on a heading:

<h1 title="Your title text here">This is your title</h1>

Browsers won't add styles to visibly distinguish the text, though, although this only matters for the first example. For

acronym

, Mozilla/Firefox adds a dotted underline, but Internet explorer doesn't.

To fix this, you need to use a bit of CSS in your page head. Something like:

acronym {
border-bottom:1px dotted #000;
cursor:help;
}

I hope that is what you are looking for!

[garann]

I'm not sure if I'm answering your question, but it sounds like you just want a small window to pop up with more info, and you want this several times on your page, for different words or sections that require explanation. Is that right?

If so, it's pretty easy. Some sort of a hyperlink is involved. It might look something like this:

<p><input type="checkbox" name="expert" value="1">
I am an expert in Quantum Mechanics.
<a href="javascript:window.open("WhatIsAnExpertInQuantumMechanics.htm","Expert",
"toolbar=yes,resizable=yes,width=400,height=400,scrollbars=yes");">Help?</a>
</p>

note: a line break was added before"toolbar=yes to remove
the side scroll on this page - but the javascript should all be on
one line, so if you use it on your page, delete that line break.

Just reuse that link every time you want the window to pop up, but change the "WhatIsAnExpertInQuantumMechanics.htm" to be the name of a page with the Help information you want to display.

[edited by: tedster at 10:09 pm (utc) on Dec. 23, 2004]
[edit reason] fix side scroll [/edit]

[peted]

Garann, I pretty sure you answered my question. I don't want a new window to appear, just a little field, like the one that appears with a day and date if I hover my cursor over the time in the bottom righthand corner of my browser (the example I SHOULD have given in my initial post). (I don't want extended load time and anything as elaborate as a new window, but something whose code will load on the client with the underlying page.) Encyclo, I'll experiment with what you gave me, and get back to you. I'll have to see what comes up. Thank you both! This is a really great site, very collegial! PeteD