How to achieve an effect?

[Dung Ping]

Hello,

I like to achieve following on my web page:

When the visitor moves the cursor to a word on the page, a small square
will appear besides it. In the square the visitor will be able to see
explanation about the word. The size of the square depends on how
many words in it. This is exactly like what happens on MS Windows.
When moving the cursor to an icon, information about it will appear in
a square besides it.

With the html, this effect may be achieved with the title attribute
within img tag. But I like it to happen when the cursor moves over
text.

Thanks.

 

[Beauregard T. Shagnasty]

Hello,

Good morning.

I like to achieve following on my web page:

When the visitor moves the cursor to a word on the page, a small
square will appear besides it. In the square the visitor will be able
to see explanation about the word. The size of the square depends
on how many words in it. This is exactly like what happens on MS
Windows. When moving the cursor to an icon, information about it will
appear in a square besides it.

With the html, this effect may be achieved with the title attribute
within img tag. But I like it to happen when the cursor moves over
text.

Will this suffice? If you want more than a hundred characters, you'll
have to resort to some JavaScript trickery, which of course won't work
for those with it disabled or unavailable.

CSS:
..tip { border-bottom: 1px dotted; }

HTML:
<p>A long, long time ago in a
<span class="tip" title="A galaxy is very large and you can't get to the
other side before supper">galaxy</span>
far, far away ...</p>

 

[fuliopen]

Good morning.


Will this suffice? If you want more than a hundred characters, you'll
have to resort to some JavaScript trickery, which of course won't work
for those with it disabled or unavailable.

CSS:
.tip { border-bottom: 1px dotted; }

HTML:
<p>A long, long time ago in a
<span class="tip" title="A galaxy is very large and you can't get to the
other side before supper">galaxy</span>
far, far away ...</p>

Thanks a lot. It works well. By the way, can the font in the
rectangle be changed, such as color or size?

Thanks again.

 

[Jim Moe]

With the html, this effect may be achieved with the title attribute
within img tag. But I like it to happen when the cursor moves over
text.

See the <dfn> element.

 

[Beauregard T. Shagnasty]

Thanks a lot. It works well. By the way, can the font in the
rectangle be changed, such as color or size?

The rectangle is normally referred to as a "tooltip" and is controlled
by the browser and the operating system. No way to change it that I know
about.

 

[Dung Ping]

The rectangle is normally referred to as a "tooltip" and is controlled
by the browser and the operating system. No way to change it that I know
about.

I want to apologize for the confusion that I may have caused by using
two different email names on this thread.

Thank all for help.