Simulating IntelliText For A Site-Wide Glossary

Is there a way to clone those green links and info boxes?

[HyperGeek]

Throughout our web site, I'd really love to have specific words highlight in green IntelliText, but for the information box to include a glossary definition instead of an ad.

Can anyone point me to some scripts, etc. that could simulate this?

[john_k]

Not sure how complex you want it to be. One simple way is to put the text inside of an inline element (such as a span) and give the element a title attribute. If you also define a class for such elements, then you can easily highlight the text for a visual clue to the user.

Example:
A sentence with an <span class="definition" title="This will make things clearer for you.">obscure word</span> and corresponding pop-up definition.

[HyperGeek]

Okay, thanks for the info, that's a great start.

I'm looking for a way to put some formatting in that little info box, though.

This page has a good example of what I'm talking about. Notice the "Usher" intellitext info:

[comingsoon.net ]

It seems that they use a DIV with an ID attribute, and then a style sheet for the info window. I'm not too "up" on everything that can be done with SPAN tags as I've always stuck to the safe, basic tags (i'm also a tad confused on what exactly they're calling with the ID attribute inside the DIV tag since CSS is called by classes.).

Also, how do they do that double underline with their CSS - I don't remember that as being a valid value for TEXT-DECORATION!?!

[HyperGeek]

Okay, found a good way to do the double underline. Posting it just in case someone wanted to know how.

.class {color: green; border-bottom: 3px double}

[HyperGeek]

The only problem with the above example (the info box) is that it doesn't allow for lengthy glossary definitions and seems to cut off at about 75 chars.

Any other suggestions? I'm guessing it has something to do with the DIV ID?

[tedster]

i'm also a tad confused on what exactly they're calling with the ID attribute inside the DIV tag since CSS is called by classes

The id attribute works just like the class attribute, except it is unique within a given document - that is, only one element on the entire page should have any given id.

[HyperGeek]

So what exactly are you "calling" with the ID?

Or is it for identification purposes only?

[tedster]

You are calling the set of CSS rules that were declared elsewhere for that id. Suppose we have id="figleaf"

Then either in the head, or in the external .css document, there is a set of rules that looks like this:

#figleaf {
[as many rules as you need
go here];
}

[HyperGeek]

So, it's like a way of nesting styles...

...well, I'll be. ;)

Great example, I guess it's time to start using these tags I've been ignoring for the past few years.

[tedster]

It should be a wonderful experience. I tried to learn CSS right when browsers "said" they were supporting CSS. Of course, they were so buggy it was impossible to tell whether you made a mistake or the browser did.

But things have evolved quite far since then, and css has really come into its own. Our CSS Forum [webmasterworld.com] stands ready to help - I think you'll find that its one of the best CSS resources on the web.

[HyperGeek]

Absolutely. It's shameful that I've ignored those tags, actually, but you kind of nailed it with the statement about browser incompatability. It's the main reason I stayed away - no time to learn something that might have gone the way of Netscape's <LAYER> tag.

But, I digress...

I've since looked at numerous "tooltip" scripts on DynamicDrive, but have failed to find one that will:

1. Work with text and not links.
2. Be functional on all browsers.
3. Will allow me to put some sort of formatting within the info box (or "tooltip" box).

I really need some suggestions. Got any?

Thanks.