jquery Probe Location Tip window (toolTip box) detailed analysis _jquery

Here I use jquery to make a hint window of JS, and made a small demo, simple summary:

Position

The arrow points to a different direction depending on where the current mouse is located:

Upper-Left (left-top) (default), lower left (left-bottom), upper right (right-top), lower right (right-bottom), upper left-hand (top-left), top right-hand (top-right), Lower left (bottom-left), lower right (bottom-right)

Priority level

The priority of the above cases is reduced in turn

Probing ideas

The basic idea of detection is:

First, it is also a prerequisite to determine whether the height or width of the container is the window corresponding to the height or width of twice times, the reason is twice times, because the critical point is the target container of the midpoint of each side

/*
* First determine whether the target container height or width is the container corresponding height or width and arrow size of the sum of twice times, otherwise, the error. Is twice times as the critical point is the midpoint of each edge of the target container.
*/

Next, you can judge one by one according to priority:

/*
* The idea is, first detect the left side, and then detect the right side, are not fit, the detection of the top, are excluded, and then consider the bottom. Testing the left and right side, first consider whether the top can be put down, testing up and down, first consider the distance from the left side of the big.

* 1. When detecting the left side, determine if the upper and lower distance can drop the arrow offset, and one cannot be dropped (for example, top), then [' Top ', ' left '], right

* 2. When you check up and down, determine whether the left and right distance can drop the arrow offset (the default is top), one side can not be put down, that is, the side of the mouse bias (if left<right, then left), then [' Top ', ' left '], when the arrow offset is 0, with the mouse move, The mouse left increases, then increases to the maximum offset.

* Default is left, top.
*/

Specific circumstances to judge:

• According to the priority, first determine whether the right mouse to lay down the window:

◦ can be put down, to determine if you can put another arrow

If you can put it down

To determine whether the top can drop an arrow, including the arrow offset, if you can

To determine if the top can drop the arrows including the offset and not exceed the target container height, left-top

Otherwise, if the top is larger than the window height, and the bottom can drop arrows include its offset, left-bottom

Otherwise, the judge bottom can lower the arrow and the window, then Top-left

Otherwise, based on our prerequisites, is Bottom-left

If you can't put it down, judge if the bottom can drop the window and the arrows.

Can, then for Top-left

Otherwise, for Bottom-left

◦ can not put down, then left to consider, change right, the same idea

Situation and position of the window in eight situations

Example Top-left

Copy Code code as follows:

Case ' Top-left ':
Top Plus Arrow Size
This.conObj.css (' top ', top + tartop);
Determine left distance
if (left < Arroffset) {
Cling to the left.
This.conObj.css (' left ', tarleft);
Any else if (right < (Conwidth-arroffset)) {//If right-hand does not support its own distance (Conwidth-arroffset), the left value is reduced, the arrow follows the mouse, and the Align your right with the container
The normal left side, minus the width (conwidth-arroffset)-Right, Left-arroffset-((Conwidth-arroffset)-right-hand), draws the Tarwidth -Conwidth
Another way of thinking, close to the right, that is, the left distance, the target container width minus its own width
This.conObj.css (' left ', Tarwidth-conwidth + tarleft);
else {//left in normal display
This.conObj.css (' left ', Left-arroffset + tarleft);
}
Break

Eight conditions and position of the arrow

Also take Top-left as an example

Copy Code code as follows:

Case ' Top-left ':
This.arrowObj.prependTo (This.conobj);
If con clings to the right, at this point, the arrow moves with the mouse
if (Conleft = = 0 && (Conwidth > (right + arroffset))) {
This.arrowObj.css (' left ', conwidth-right-arrowpos);
} else {
This.arrowObj.css (' left ', arrowpos);
}
Break

Finally, in the writing code when a little sentiment:

Written code, in the refactoring n times, after writing n line comments, suddenly think, in fact, whether it is writing code, or life, we have a set or the premise of the established or normative. And once this norm is broken, often naught, if not, is often very hurt. Example small to code, large to society, without exception