Add Instant hints to page text

Web-instant hints are a human-style design for Windows apps. When the user does not know a text or picture button function, as long as the mouse moved to this button, there will be an instant prompt phrase. When you make a Web page, you can also use HTML language to add instant hints to your network documents.
When we develop English web textbooks, we use the prompt function to add Chinese annotation to each new word. In this example, the "Christmas is a important festival in Britain" and "many" of the English text of the The words in a sentence Christmas, festival, Britain annotation function, respectively, when the user moved the mouse to these words, the mouse will be next to display the corresponding comments.
So how do you implement this instant cue in a Web page? Here are two ways to implement this:

Show instant message next to mouse
This approach is to skillfully utilize the 〈title〉...〈/title〉 of the header element provided by the HTML language. In the new HTML 4.0 specification, 〈title〉...〈/title〉 can support almost all elements, in this case it is used in conjunction with inline element 〈span〉...〈/span〉. The 〈span〉...〈/span〉 element is the newly added universal line content element of the HTML 4.0 specification, which in this case separates the words that will set the hint and sets the title property of each word separately.
Implementation of the source code is as follows:
〈! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.0//en"
〈html〉
〈head〉
〈title〉 Web page Instant hint demo 〈/title〉
〈! Style element defines the styles for the body of the top-level element and span of inline elements
〈style〉
Body {Cursor:default}
SPAN {Background-color:yellow}
〈/style〉
〈/head〉
〈body〉
〈h3〉unit Lesson 54〈/h3〉
〈p〉
〈! use inline element span to enclose each word that you want to set a hint and set the hint message with the TITLE element.
〈! in this example, the words to set the cue message are Christmas, festival, britain〉
〈span title= "Christmas--n Christmas" 〉christmas〈/span〉is an important
〈span title= "Festival--n.&&&&adj. Festival (of); Festive ()" 〉festival〈/span〉
In〈span title= "britain--n. Britain" 〉britain〈/span〉and many other
Parts of the world.
〈/p〉
〈/body〉
〈/html〉

display a prompt in the window status line
In the example above, the hint message appears next to the mouse. But how do you do that if you want to display the prompt in the state line of the browsing window? The method implemented in this example is to set each word that is to set the hint to a 〈a〉...〈/a〉 form with a hyperlink element, and to set the Status property value (representing the state line) for the onmousemove and onmouseout events of each link.
Implementation of the source code is as follows:
〈! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.0//en"
〈html〉
〈head〉
〈title〉 Web page Instant hint demo 〈/title〉
〈style〉
Body {Cursor:default}
〈/style〉
〈/head〉
〈body〉
〈h3〉unit Lesson 54〈/h3〉
〈p〉
〈! using the hyperlink element a.../a the words that will set the cue message are set to the Hyperlink form respectively.
〈! The value of the HREF element is set to "javascript:void (null)" to indicate that the link is an empty link and is not linked to another place.
〈!onmousemove Event Sets the cue message when the mouse moves to the link
〈!onmouseout event set the mouse to leave the link when the message is blank, will be prompted to clear the message
〈!window.status= "A string" indicates that the message is set on the status line.
〈a href= "javascript:void (NULL)"
Onmousemove= "Window.status= ' Christmas--n, Christmas."
〉christmas〈/a〉is an important
〈a href= "javascript:void (NULL)"
Onmousemove= "Window.status= ' Festival--n.&&&&adj. Festival (of); Festive ()"
〉festival〈/a〉in
〈a href= "javascript:void (NULL)"
Onmousemove= "Window.status= ' britain--n. Britain;
〉britain〈/a〉and many other
Parts of the world.
〈/p〉
〈/body〉
〈/html〉