=> Implementation function: JS event-driven and CSS inline style simulation tooltip;
<HTML>
<Head>
<Title> tips for using CSS </title>
<SCRIPT type = "text/JavaScript">
Function tooltip (){
This. tooltip = Document. createelement ("Div ");
This. tooltip. style. Position = "absolute ";
This. tooltip. style. width = "250px ";
This. tooltip. style. Height = "150px ";
This. tooltip. style. backgroundcolor = "lightgray ";
This. tooltip. style. Border = "3px outset black ";
This. tooltip. style. Visibility = "visible ";
This. tooltip. ID = "tooltip ";
This. tooltip. classname = "tooltipshadow ";
This. content = Document. createelement ("Div ");
This. content. style. Position = "relative ";
This. content. ID = "tipcontent ";
This. content. classname = "tooltipcontent ";
This. tooltip. appendchild (this. content );
Console. Log ("tooltip class ");
}
Tooltip. Prototype. Show = function (text, x, y ){
This. content. innerhtml = text;
This. tooltip. style. Left = x + "PX ";
This. tooltip. style. Top = Y + "PX ";
This. tooltip. style. Visibility = "visible ";
If (this. tooltip. parentnode! = Document. Body ){
Document. Body. appendchild (this. tooltip );
}
Console. Log ("tooltip show method ");
}
Tooltip. Prototype. Hide = function (){
This. tooltip. style. Visibility = "hidden ";
Console. Log ("tooltip hide method ");
}
Function firefn (){
// Obtain the selected text
VaR text = "";
If (window. getselection ){
TEXT = Window. getselection (). tostring ();
} Else if (document. getselection ){
TEXT = Document. getselection ();
} Else if (document. Selection ){
TEXT = Document. selection. createRange (). text;
}
VaR tip = new tooltip ();
Tip. Show (text, 100,100 );
SetTimeout (function (){
Tip. Hide ();
},2000 );
}
</SCRIPT>
</Head>
<Body>
<P onmouseup = "firefn ()"> many colleagues who are about to develop software or who have not been doing it for a long time mostly focus on new technologies and creativity; but there is always a shadow in the sun,
No matter how the method changes, there is always something that cannot be completely improved. </P>
</Body>
</Html>