How to achieve this effect?

[fuli open]

When moving the cursor to an underlined word in some pages, a large
rectangle will appear at its right upper corner or somewhere around,
displaying relevant information. When the cursor moves away, the
rectangle disappears. This is a convenient and useful effect, and I
like to learn the skills.

If anyone knows where to go, such as online tutorial or books, please
share the information with me. Thanks.

fuli open

 

[Bergamot]

When moving the cursor to an underlined word in some pages, a large
rectangle will appear at its right upper corner or somewhere around,
displaying relevant information.

You didn't supply a URL where you saw this effect so I'll guess it's a
"tool tip", typically done with the title attribute, but there are other
ways to show pop-up text, such as
http://meyerweb.com/eric/css/edge/popups/demo.html

You can use the title attribute on pretty much any element - links,
images, table cells, whole paragraphs, etc.
http://www.w3.org/TR/html401/struct/global.html#adef-title

Just use pop-up text with caution. If the info is important, make sure
people who don't use a mouse can still get to it.

 

[Jim Moe]

When moving the cursor to an underlined word in some pages, a large
rectangle will appear at its right upper corner or somewhere around,
displaying relevant information. When the cursor moves away, the
rectangle disappears. This is a convenient and useful effect, and I
like to learn the skills.

If the text is underlined, it is likely the <acronym> tag. Without an
URL, though, I'm only guessing.
As Bergamot noted you add the "title" attribute to get the flyout.

 

[Jukka K. Korpela]

Scripsit fuli open:

When moving the cursor to an underlined word in some pages, a large
rectangle will appear at its right upper corner or somewhere around,
displaying relevant information. When the cursor moves away, the
rectangle disappears. This is a convenient and useful effect, and I
like to learn the skills.

I'm sure that if you had tried hard, you could have described this more
descriptively than "this effect" at your Subject line. Remember that people
decide mostly on the basis of the Subject line whether they bother reading a
message at all, so by using vague Subject lines, you're excluding the busy
experts from your audience.

In fact, it's not convenient, and it's not useful at all when authors _rely_
on it.

To start with, in the most common method of creating such popup texts, the
font size is stupidly small and the text vanishes after a few seconds,
though you can get it back by using the mouse again - and by the time you
locate the position where you were reading, it vanishes again.

If anyone knows where to go, such as online tutorial or books, please
share the information with me. Thanks.

The brief tutorial is "Don't".

When you have designed and implemented a page where all the relevant
information is available without such tricks, either as normal content or
via normal links, and you would like to enhance it by making some of the
information _more comfortably_ available to some users, you can ask for the
Advanced Tutorial. But then you have to pay: to post a URL and an
explanation of what texts should appear as mouseover tooltips and where.

 

[dorayme]

so by using vague Subject lines, you're excluding the busy
experts from your audience

Are we to conclude then that you have a little time on your hands
at the moment then? <g>