OnMouseOver Popup Help Notes

<span> or <a href=#*$! title=yyy>

[peterinwa]

I have a webpage that's a calculator for which no one reads the instructions. I even get e-mails asking about things covered in the instructions! So I've made it as intuitive as possible.

In addition, I have very brief descriptions of the functions of the buttons on the calculator that popup on the screen via title in <a href=#*$! title=yyy>.

This works fine, but only displays for a couple seconds. Is there a way to have it stay on-screen until you move the mouse off the button? Can you control the appearance of the text, background, etc?

I found one site that does what I want with <span> and a CSS file to control it. But I can't see the CSS file so I don't know how it works.

Pros and cons about using title:

What I like is that there is a slight delay when you put the cursor over a button. So if you just click on it and move the cursor off the button right away, the notes won't popup at all. This is good, because users will click on the buttons again and again and continually seeing the notes popup would be unnecessary and annoying.

What I don't like is that the notes don't remain on the screen long enough for the user to be able to read more than a few words.

Cons about using <span>:

What I don't like is that the notes popup as soon as you put the cursor over the button. This would be really annoying as the buttons are used over and over by experienced users. I would not want to use <span> unless there could be a delay whereby the notes didn't popup unless you held the cursor over the button for at least a couple seconds.

Also, as I say, I don't know how to code CSS to control <span>.

Any ideas or examples?

Thanks, Peter

[flaxmac]

Best tip, you'll love this one.

I am using IE, so your menu options may be different, but I am sure you'll work it out.

To see someone's css file,
open their web page,
click on the view source,
check the name of their css file,
click on tools,
click on internet options,
click Settings,
click view files,
click on the internet address bar to sort it by site name,
scroll down to the site you are looking for,
then just select the css file,
and you can see everything. Or some site like webmasterworld just keep it in their source code which is easy enough to see.

Have fun....

[D_Blackwell]

Or - use Firefox, and add the Web Developers toolbar (A must have for me.)

Then just click CSS, click View CSS - and a new tab will display embedded CSS, followed by linked external CSS, if any.

[peterinwa]

Thanks. Amazing. Useful. Scary!

I always think of all my files going into my user's (PC's) memories. Somehow the thought of all my work being written on hard drives around the world is unsettling! (Or maybe makes me feel powerful? Haha.)

One other trick is to click on Delete Files, then refresh the page in question before clicking on Settings. This helped me a lot as I didn't have so many files to scroll through.

This helps if I can in fact use CSS. I still need all my questions answered.

Thanks for the tip!

[flaxmac]

If you delete you will loose all your password setting for other sites, but too late now you've done it....

[peterinwa]

I don't think so... beside the Delete Files is Delete Cookies. The passwords are saved in cookies.

I do Delete Files frequently for other reasons.

BTW, your input is much appreciated. But it's sometimes frustrating when a post gets sidetracked... I hope others eventually reply to my original questions.

Thanks again.