Re: Screen tips on without Hyperlink?

Tech-Archive recommends: Repair Windows Errors & Optimize Windows Performance

From: Jack Brewster (jack_at_removethis.andthis.mvps.org)
Date: 05/03/04


Date: Mon, 3 May 2004 14:16:49 -0700

Bonnie,

There are a couple ways to approach this. If the word you're defining is an
abbreviation or acronym, to be syntactically correct, you can use whichever
of the following is appropriate:
- <abbr title="Text that pops up">defined abbreviation</abbr>
- <acronym title="Text that pops up">defined acronym</acronym>

For info on which is best to use when:
- abbr - http://www.htmlhelp.com/reference/html40/phrase/abbr.html
- acronym - http://www.htmlhelp.com/reference/html40/phrase/acronym.html

But if you're talking about a phrase or regular word, you should probably
just use a <span>, for example:
- <span title="Text that pops up">defined word or phrase</span>

In all of the cases, note that within the first tag I've added title="Text
that pops up." The value after the title= is what will appear when your
visitor points their cursor at your word or phrase.

I'd did a test in Internet Explorer v. 6 and it doesn't seem to even
acknowledge the <abbr> tag and styling the link (see below) doesn't appear
to work on <acronym>. You're probably best to ignore both and just use
<span> for now. Yes, IE _isn't_ the only browser on the planet, but the
majority of your visitors probably use it.

With any of the three suggestions, the described word isn't going to stand
out on the page which means your visitors won't know to point to it in the
first place. It appears the convention for highlighting definition words is
to use a dotted underline. That makes it kind of look like a hyperlink so
visitors may point to it with their mouse, but because it looks different,
they shouldn't expect it to actually _be_ a link. Your best approach for
doing this is using Cascading Style Sheets (CSS). On the page that you want
to add this functionality, include the following in the head of your page
(between the <head> and </head> tags):

<style type="text/css">
span {
border-bottom-width: 1px;
border-bottom-style: dotted;
/* change blue to fit your site's style */
border-bottom-color: blue;
/* change the cursor style */
cursor: help;
}
</style>

If you already use the <span> tag on your pages, you'll need to add a more
specific class designation or else all of the <span> tags will get the
underline even if they don't have a definition. To do that you should
change the definition spans by adding a class to them, for example:
<span class="helptip" title="Pop up text">defined text</span>

Then you would modify the CSS code I've shown above to:
<style type="text/css">
span.helptip {
border-bottom-width: 1px;
border-bottom-style: dotted;
/* change blue to fit your site's style */
border-bottom-color: blue;
/* change the cursor style */
cursor: help;
}
</style>

What this says is, "Apply this style to every <span> tag if it has a
class="helptip".

For more on CSS, check out:
http://www.w3schools.com/css/
http://www.mako4css.com

Good luck!

-- 
Jack Brewster - Microsoft FrontPage MVP
"Bonnie" <anonymous@discussions.microsoft.com> wrote in message
news:7aeb01c4314c$b2b55400$a601280a@phx.gbl...
> Is it possible to have a screen tip pop up on mouse-over
> without making the word or phrase a hyperlink? I just want
> to be able to pop up some clarification about the word or
> phrase within a box similar to a screen tip. Trying to do
> this the easy way, without creating pop-up windows and
> such. Just wondered if there is an easy way out there.
>
> I thought about creating a bookmark on the word and then
> link the word to the bookmark. That works ok, but the
> screen jumps down and I really don't want anyone to click
> the word.
>
> Thanks for your help!
> Bonnie


Relevant Pages


... that if I only got to the <span>, I could easily access the innerHTML ... function getElementsByClass (theClass, node, tag) { ... are accessing the Array instance instead of the element object. ...
(comp.lang.javascript)
  • Re: cant retrieve content from inside a

  • ... that if I only got to the <span>, I could easily access the innerHTML ... function getElementsByClass (theClass, node, tag) { ... are accessing the Array instance instead of the element object. ...
    (comp.lang.javascript)
  • Re: Help: How can I enumerate span element attributes using MSHTML
    ... Using an HTMLSpanElement I want to enumerate the attributes of a SPAN ... the span tag above?- Hide quoted text - ... I used XML ...
    (microsoft.public.dotnet.languages.vb)
  • Re: HTML email tracking-ware?
    ... neither the anchor nor the span are visible because there is ... If I happen to hover the cursor over ... My guess is that initially there was some clickme text in the span, ...
    (comp.infosystems.www.authoring.html)