Use JavaScript to implement floating boxes similar to tooltip

When using ASP. NET, you sometimes need to hover the cursor over a certain position of the page, or when hovering over a control, you need

A floating box is displayed. This floating box can be a detailed description of the control content or some other information. For example, a table may exist on the page.

If an item in the table is called "Assessment Criteria", you may need to move the cursor to the cell corresponding to the "assessment criteria ".

The floating box that describes the "assessment criteria" in detail.

You may immediately think of The tooltip attribute. It is true that the tooltip attribute can achieve this effect. However, the tooltip attribute has a disadvantage: Its display

There is a time limit. After a certain period of time, the tooltip will automatically disappear. Only by moving the mouse over the specified control can the tooltip be displayed again

Now. In this case, if you describe a lot of content, the tooltip obviously cannot meet your needs.

Here, csdn provides a good solution when posting scores. When you close the score, when you move your mouse over the text

In this box, a small yellow rectangle is displayed, showing the total score of the problem and the remaining score. If you do not move the mouse over the text

This box will not disappear. This is exactly what we need.

From the source code of the corresponding webpage, we can see the specific implementation of the above effect. The code is excerpted as follows. Here we mainly focus on the problem of Floating Box locating.

Code annotations have been reflected. Here, we need to clarify the concept that here we need to separate the controls into containers one by one. In large containers, we can

Place a small container. The container at the highest level of the page is document. The parent container of tablecell is table. What is the parent container of a control?

You can use the obj. offsetparent. tagname attribute to obtain:

// Functions triggered by the onmouseover event
Function CC (E, message)
...{
CEN. innertext = message;
VaR ttop = E. offsettop; // The distance from the specified control to the top of the parent container control is pixel.
VaR tleft = E. offsetleft; // The distance from the left of the control to the control of the parent container is obtained.
VaR H = E. clientheight; // The height of the specified control is obtained here.
VaR W = E. clientwidth; // The width of the specified control is obtained here.
VaR originale = E;

// Here, e is converted into a document object through the E = E. offsetparent operation, which is the highest level container;
// Here, ttop and tleft get the distance between the specified control and the top and left of the webpage;
While (E = E. offsetparent)... {ttop + = E. offsettop; tleft + = E. offsetleft ;}
CEN. style. Display = ""; // layer display
CEN. style. Top = ttop + h;
CEN. style. Left = tleft + w-cen. clientwidth; // the above Code adjusts the floating layer to the front and bottom of the specified control.
}

// Functions triggered by the onmouseout event
Function out ()... {Cen. style. Display = "NONE ";}

 

The floating box is implemented using Div. The corresponding code is as follows. You can adjust the size and background as needed:

<Div id = "pop" style = "display: none; font-size: 13px; Z-INDEX: 99; Background: # FFFF00; width: 200px; position: absolute "> </div>

The following is an official explanation of some objects encountered in JavaScript code, which is also listed as follows:

------------------ Offsetparent attribute ----------------------

Offsetparent Property

Internet Development Index

Retrieves a reference to the container object that defines the offsettop and offsetleft properties of the object.

Syntax

Html	N/
Scripting	[Oelement=]Object.Offsetparent

Possible values

Oelement

Object that contains es the container object.

The property is read-only. The property has no default value.

Remarks

Most of the timeOffsetparentProperty returns the body object.

NoteIn Microsoft Internet Explorer 5, OffsetparentProperty returns the table object for the TD object; in Internet Explorer 4.0 it returns the tr object. You can use the parentelement property to retrieve the immediate container of the table cell.

Example

This example shows how to determine the position ofTDObject. AlthoughTDObject appears to the far right in the document, its position is close to the x-axis and Y-axis, because its offset parent isTableObject rather than the document body. For Internet Explorer 4.0, this same example returns a position of 0, 0 because the offset parent is the table row.

Showexample

<HTML><HEAD><TITLE>Elements: Positions</TITLE><SCRIPT LANGUAGE="JScript">function showPosition(){var oElement = document.all.oCell;alert("The TD element is at (" + oElement.offsetLeft +"," + oElement.offsetTop + ")/n" + "The offset parent is "+ oElement.offsetParent.tagName );}</SCRIPT></HEAD><BODY onload="showPosition()"><P>This document contains a right-aligned table.<TABLE BORDER=1 ALIGN=right><TR><TD ID=oCell>This is a small table.</TD></TR></TABLE></BODY></HTML>

Standards Information

There is no public standard that applies to this property.

Applies

Sub Platform Version Win16: 4.0 Win32: 4.0 Windows CE: 4.0 UNIX: 4.0 Mac: 4.0 Version data is listed when the mouse hovers over a link, or the link has focus.

A, acronym, address, applet, area, B, BDO, big, BLOCKQUOTE, body, BR, button, caption, center, cite, code, Col, colgroup, comment, custom, DD, Del, dfn, Dir, Div, DL, DT, em, embed, fieldset, Font, form, frame, HN, HR, I, IFRAME, IMG, input type = button, input type = checkbox, input type = file, input type = hidden, input type = image, input type = password, input type = radio, input type = reset, input type = submit, input type = text, INS, KBD, label, legend, Li, listing, MAP, marquee, menu, nobr, object, ol, option, P, plaintext, PRE, Q, RT, Ruby, S, SAMP, select, small, span, strike, strong, sub, sup, table, tbody, TD, textarea, tfoot, Th, thead, tr, TT, U, UL, VAR, XMP

Move the mouse pointer over an element in the applies to list to display availability information for the listed platforms.

See also

Measuring Element Dimension and location

------------------ Offsettop attribute ------------------

Retrieves the calculated top position of the object relative to the layout or coordinate parent, as specified by the offsetparent property.

Syntax

Html	N/
Scripting	[Icoord=]Object.Offsettop

Possible values

Icoord

IntegerThat sums es the top position, in pixels.

The property is read-only. The property has no default value.

Remarks

You can determine the location, width, and height of an object by using a combination of the offsetleft,Offsettop, Offsetheight, and offsetwidth properties. These numeric properties specify the physical coordinates and dimensions of the object relative to the object's offset parent.

For more information about how to access the dimension and location of objects on the page through the dynamic HTML (DHTML) Export ocument Object Model (DOM), see Measuring Element Dimension and location.

Example

This example usesOffsettopProperty to determine whether an object is in the user's view.

Showexample

<HTML><HEAD><SCRIPT>function isinView(oObject){var oParent = oObject.offsetParent;var iOffsetTop = oObject.offsetTop;var iClientHeight = oParent.clientHeight;if (iOffsetTop > iClientHeight) {alert("Special Text not in view. Expand Window to put Text in View.");}else{alert("Special Text in View!");}}</SCRIPT></HEAD><BODY onload="window.resizeTo(430,250)" onclick="isinView(oID_1)"  SCROLL=NO><DIV STYLE="position:absolute;left:20px">Click anywhere in window to see if special text is inview.</DIV><DIV id="oID_1" STYLE="position:absolute; left:50px;top:300px;width:280px;color:lightGreen;font-size:large;font-weight:bold;background-color:hotPink;font-family:Arial">Here's some special text</DIV></BODY></HTML>

Show me

Standards Information

There is no public standard that applies to this property.

Applies

[Object Name] Platform Version Win16:   Win32:   Windows CE:   UNIX:   Mac:   Version data is listed when the mouse hovers over a link, or the link has focus.

A, acronym, address, applet, area, B, BDO, big, BLOCKQUOTE, body, BR, button, caption, center, cite, code, Col, colgroup, custom, DD, del, dfn, Dir, Div, DL, DT, em, embed, fieldset, Font, form, frame, HN, HR, I, IFRAME, IMG, input type = button, input type = checkbox, input type = file, input type = image, input type = password, input type = radio, input type = reset, input type = submit, input type = text, INS, KBD, label, legend, Li, listing, MAP, marquee, menu, nobr, object, ol, option, P, plaintext, pre, Q, RT, Ruby, S, SAMP, select, small, span, strike, strong, sub, sup, table, tbody, TD, textarea, textrange, tfoot, Th, thead, TR, TT, U, UL, vaR, XMP

Move the mouse pointer over an element in the applies to list to display availability information for the listed platforms.

See also

Boundingheight, boundingleft, boundingtop, boundingwidth