Author Topic: HTML Coding Question - Screen Tips or Balloon Tips How-To? (Read 1882 times)

Tiger-Heli · « **on:** September 16, 2005, 07:19:45 am »

See http://www.mameworld.net/tigerheli/example.htm (ignore the black on blue text problem, I didn't upload the .css file).

What I want to do is have a screen tip on each line that explains what the line does. I don't want to use JavaScript or Perl, for maximum compatibility. The idea is that users that don't care can ignore this. Users that want to learn more can read the notes. And all users can copy and paste the text into Notepad to save it as a batch file.

To do this, I am using dummy links and Title tags, but this is just a way that I thought would work.

In Nutscrape 4.7, the page will barely display, but this is an obselete browser, IMHO.

In IE or Opera 7.0, the page works perfectly.

In Firefox 1.0 PR, the text on the last two lines is truncated (bad).

In Opera 8.0, the text is preceded with "Title:" and the indentation on the last line is not perfect, but it works.

The code I am using is:

<a title="Explanation text">Displayed Text</a>

Is there a better way to do this???

NOTE - Attachment included in case I ever take down the linked page. - Download and delete the txt extension.

webgeek · « **Reply #1 on:** September 16, 2005, 08:15:34 am »

The best universal browser solution would be Javascript and DHTML. That can be done and still work great for all the browsers you listed. It will just take some work.

Realistically though, I would only worry about IE and maybe Firefox. All the other browsers have trivial user bases as a whole and don't warrant too much effort.

Some quick searching and I found this one:
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm
It looks good and works great.

Another thought, you could use flash to do this very easily and a lot more. It's also supported in pretty much every browser and has good compatibility.

Have fun!

Mike

Tiger-Heli · « **Reply #2 on:** September 16, 2005, 09:13:16 am »

I'm new to web design - Actually, I just picked up .css about 2 months ago. I want to avoid Flash and Javascript. Most people probably have it, but a lot of secure proxies block it, and many browsers block it to prevent viruses. Also, if you are a user without admin privileges, it can be hard to install (Don't ask me how I know!). . .

The link you posted looks perfect!!! I especially like that it can be used with a DIV tag rather than an <a></a> tag. Some questions (as always).

What is DHTML - I know it stands for Dynamic HyperTextTransferMarkupLanguage (well at least I think so, but is it univerally supported without external plug-ins and such?

I couldn't tell from the link if there was anything to download to use it, or if I just insert the code.

Step 1 - Instructions say to add lines to the <head> section of the page. Could (should?) this be added to the associated .css file instead? If I don't want a width limit of 150, can I delete the line, or do I need to specify something like 640?

Step 2 - <script type="text/javascript"> - I assume this means the script uses Java Script? Seems to work pretty well though, so I guess that's not that big a deal though.

Thanks again for the link and help!!!

SirPoonga · « **Reply #3 on:** September 16, 2005, 10:25:58 am »

Quote from: webgeek on September 16, 2005, 08:15:34 am

The best universal browser solution would be Javascript and DHTML. That can be done and still work great for all the browsers you listed. It will just take some work.

Or CSS.
http://psacake.com/web/jl.asp
http://www.communitymx.com/content/article.cfm?cid=4E2C0&print=true

Tiger-Heli · « **Reply #4 on:** September 16, 2005, 12:10:27 pm »

Answering some of my own questions - I decided I like Webgeek's suggestion better than Sir Poonga's. Sir Poonga's is cleaner and more code-compliant (probably) but needs too many workarounds.

Odd thing's with WebGeek's script:

Nvu goes ape-sh$t if I try to include double quotes in the tooltip text. Even if I tried putting them in as " I could save the file and it displayed fine, but then when I re-opened it, Nvu changed the " to &amp;amp;amp;quot; - which doesn't work. I ended up changing them to single quotes with a preceding \, which made everyting happy.

The tooltips do not display in Nvu's Preview pane, even though it is based on Firefox

The saved document looks fine in Firefox, though.

Quote from: Tiger-Heli on September 16, 2005, 09:13:16 am

The link you posted looks perfect!!! I especially like that it can be used with a DIV tag rather than an <a></a> tag. Some questions (as always).

Changed my mind on this - The DIV tag inserts a carriage return if you copy and paste it and the text above it into a document. The <a> tag does not do this and works fine, though.

Quote

I couldn't tell from the link if there was anything to download to use it, or if I just insert the code.

Just inserted the code and it worked.

Quote

Step 1 - Instructions say to add lines to the <head> section of the page. Could (should?) this be added to the associated .css file instead?

Chickened out and just added it to the page, dunno?

Quote

If I don't want a width limit of 150, can I delete the line, or do I need to specify something like 640?

Deleting the width line seemed to work fine. . .

Thanks again for the link and help!!!

SirPoonga · « **Reply #5 on:** September 16, 2005, 12:48:12 pm »

The reason I suggested CSS is the tolltips will work on browsers that disabled javascript. It isn;t a work around, it's using css.

Tiger-Heli · « **Reply #6 on:** September 16, 2005, 01:31:10 pm »

Quote from: SirPoonga on September 16, 2005, 12:48:12 pm

The reason I suggested CSS is the tolltips will work on browsers that disabled javascript. It isn;t a work around, it's using css.

I should have been move clear - I didn't mean that the code was a workaround, but if you read through that page, the whole thing says "Try this, but that won't work, so we have to change it to this, but that's still not right so we do this, now we're 80% there, so . . ."

Webgeek's link said "Copy this and throw it in, Copy this and throw it in", boom . . . you're set.

The other idea I wasn't crazy about is it uses the span tag and Nvu produces very dirty code (lots of span tags with no text in them, three or four font changes in a row, etc.) Worse if you copied stuff into it, and still better than FrontPage, though.

I think I just had this vision of empty tooltips popping up all over my document, but I guess as long as the spans aren't inside a hyperlink it won't matter.

webgeek · « **Reply #7 on:** September 16, 2005, 01:36:00 pm »

Quote

many browsers block it to prevent viruses

Flash can't be used to deliver a virus. There was one reported about three years ago but it involved you running the swf file directly and not in the browser. It was also patched by Macromedia almost immediately. Flash is also installed on 95+% of all internet accessible machines already.

Quote

I know it stands for Dynamic HyperTextTransferMarkupLanguage

Actually, it stands for Dynamic Hypertext Markup Language. I think you are mixing HTML and HTTP (Hypertext Transport Protocol). I know, the whole alphabet soup is very confusing at times.

Quote

Or CSS

Sorry, by DHTML, I was refering to CSS and DHTML together. The pure CSS example is pretty sweet. I like those quite a bit and have bookmarked em.

Quote

browsers that disabled javascript

As for people who have turned off Javascript, tough luck! Everyone always seem to worry about this but it's pretty rare. I'm a software architect by trade but these days this means I design (and usually code) enterprise web apps. I've yet to have worked on a project that's had any real problems with people disabling JavaScript. It's just plain required for a lot of the functionality people expect these days. Hell, the default behavior on ASP.NET web controls is to use javascript for initial form validation. The trick is to be careful what you do with it. The nice and simple stuff works great and can easily be browser independent without any problem. OK, enough ranting from me.

Have fun!

Tiger-Heli · « **Reply #8 on:** September 16, 2005, 03:58:42 pm »

Odd results - The WebGeek method sometimes displays the ToolTip off the screen (especially non-full screen windows in IE), but it's the best option so far.

I got the CSS method working, but even though it's supposed to work in IE on anything with an <a> tag, it only seems to work in IE if I add an href="" to the tag. That link doesn't matter if the page is an index.html page but some of the pages won't be, and I couldn't figure out the .htc stuff.

SirPoonga · « **Reply #9 on:** September 16, 2005, 04:00:02 pm »

Well yeah, in an enterprise environment everything goes through the company's proxy and gets filtered. But many home users disable javascript.

Tiger-Heli, that one site is just a step by step guide that shows you why you get hte output you do. So you learn why the tooltip works. If you want copy and paste examples search the web and you will find many.

But yes, there's nothing wrong with using javascript otherwise. Just expect people might complain. contorls.dat uses javascript to create the popup wizard windows.

webgeek · « **Reply #10 on:** September 16, 2005, 04:10:11 pm »

Quote

But many home users disable javascript.

I'd love to see some stastics on this if you have em. Many people disable popups (automatically with the new browsers) but I really doubt many people disable javascript. Two sets of stats I know of show that about 10% disable javascript:

http://www.w3schools.com/browsers/browsers_stats.asp
http://www.thecounter.com/stats/2005/September/javas.php

This is about the same as several years ago too, so it doesn't appear to be slipping. Have fun!

Mike

Tiger-Heli · « **Reply #11 on:** September 16, 2005, 04:24:01 pm »

I found a solution on the IE - with CSS problem. If I place a named anchor with a $nbsp; inside on the same line following the hypelink, and then have the link point to that named bookmark, IE thinks it's a link, but it doesn't really go anywhere.

SirPoonga · « **Reply #12 on:** September 16, 2005, 04:29:43 pm »

Since I know (counting...) 11 people who disable javascript (3 of which turn on manual accept coockies) I find it quite common.

Tiger-Heli · « **Reply #13 on:** September 17, 2005, 07:54:05 am »

Okay, I played with this for about 3 hours last night and have some pretty definitive answers -

WebGeeks method works fine, but it's fussy (in Nvu) about typo's. You do need a width tag. Without one (or with a really wide one), the ToolTip will sometimes go mostly off-screen. I set a width of 80% and that works well. If needs to be fixed also. A min of XXX and a max of 80% will give the same problems. This means that the ToolTip will be fairly large if there are only 4 or 5 words in it, but I can live with that.

SirPoonga's method - on long tooltips, a couple of words will be off the edge of the screen before it wraps back. Setting a width adjusts the background, but doesn't wrap the text.

I see why everyone on the Nvu forums was bitching about it and JavaScript. It will not preview it, and worse, if you type something in incorrectly, it will often try (and fail) to fix it, obliterating much of your other code. Save early and save often.

Regarding JavaScript - I think you are both right. When I try to open the page at home in IE for testing, I get a Warning about IE disabling stuff, and the scripts don't display. But if I go into Intenet Options - Security, JScript IS enabled.

Personally, I guess some people won't be able to see the tooltips, but I can live with that. They are just explanatory text. It's not they are pull-down menus for site navigation . . .

Bomber · « **Reply #14 on:** September 19, 2005, 10:20:16 pm »

Check your PM Tiger-Heli - didn't know how it would show up if I pasted code in the thread.


Main	Restorations	Software	Audio/Jukebox/MP3	Everything Else	Buy/Sell/Trade
Project Announcements	Monitor/Video	GroovyMAME	Merit/JVL Touchscreen	Meet Up	Retail Vendors
Driving & Racing	Woodworking	Software Support Forums	Consoles	Project Arcade	Reviews
Automated Projects	Artwork	Frontend Support Forums	Pinball	Forum Discussion	Old Boards
Raspberry Pi & Dev Board	controls.dat	Linux	Miscellaneous Arcade	Wiki Discussion	Old Archives
Lightguns	Arcade1Up	Try the site in https mode		Site News


Unread posts \| New Replies \| Recent posts \| Rules \| Chatroom \| Wiki \| File Repository \| RSS \| Submit news

Author Topic: HTML Coding Question - Screen Tips or Balloon Tips How-To? (Read 1882 times)

Tiger-Heli

HTML Coding Question - Screen Tips or Balloon Tips How-To?

webgeek

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

Tiger-Heli

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

SirPoonga

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

Tiger-Heli

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

SirPoonga

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

Tiger-Heli

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

webgeek

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

Tiger-Heli

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

SirPoonga

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

webgeek

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

Tiger-Heli

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

SirPoonga

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

Tiger-Heli

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?

Bomber

Re: HTML Coding Question - Screen Tips or Balloon Tips How-To?