Re: How to achieve this effect?

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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

.