JQuery probe location of the prompt of toolTip box details

Here I use jQuery to make a prompt pop-up js, and do a small demo, a simple summary:

bearing

Depending on where the mouse is, the arrow points in a different direction:

Left-top (default), left-bottom (left), right-top (right), right-bottom (right), top-left (top), top-right (top), bottom-left (bottom), bottom-right (bottom)

priority

In each of these cases, the priority is reduced

Detect thoughts

The basic idea of detection is:

First, and as a precondition, judge whether the height or width of the container is twice the height or width corresponding to the popover. The reason is that the critical point is the midpoint of each side of the target container

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

/ *
* the idea is, first detect the left side, then detect the right side, left and right are not fit, then detect the top, all excluded, then consider the bottom. When testing the left and right sides, first consider whether the top can be lowered; When detecting up and down, consider the distance between left and right side first.

* 1. When detecting the left side, determine whether the upper and lower distance can drop the arrow offset. If one cannot drop (for example, top), it is ['top', 'left'], the same as the right side

* 2. When detecting up and down, determine whether the left and right distance can drop the arrow offset (default is up, that is, top). One side cannot be dropped, that is, the side that the mouse is biased (if left< Right, then left), then ['top', 'left'], then the offset of the arrow is 0, as the mouse moves, the left of the mouse increases, then increases, the maximum to offset.

* default is left, top.
* /

Specific situation judgment:

The & # 8226; According to the priority, first determine whether the right side of the mouse can drop the popover:

The & # 9702; If you can put it down, see if you can put another arrow in

Li if you can put down

s determine whether the top can drop an arrow, including the offset of the arrow, if can

s left-top is used to determine that the top can drop the arrow including the offset and does not exceed the height of the target container

s otherwise, left-bottom if the top is greater than the height of the popover and the bottom can drop the arrow including its offset

s otherwise, the bottom can drop the arrow and popover, is top-left

s otherwise, based on our premise, it's bottom-left

s if not down, determine whether the bottom can drop the popover and arrow

s yes, is top-left

s otherwise, is bottom-left

The & # 9702; I can't put it down, so I'm left, I'm thinking about it, I'm thinking about right, same idea

Eight cases and the position of the popover

For example, the top - left

 case 'top-left' :
    //Top plus the size of the arrow
    this.conObj.css('top', top + tarTop);
    //Left distance
    if ( left < arrOffset ) {
        //Close to the left
        this.conObj.css('left', tarLeft);
    } else if (right < (conWidth - arrOffset)) {             //If the right does not hold itself to the right (conwidth-arroffset), the left value decreases, and the arrow follows the mouse to align the right with the container
        //For the left, subtract the width ((conwidth-arroffset) -right) and left-arroffset - ((conwidth-arroffset) -right) to get tarwidth-conwidth
        //Or another way to think about it, close to the right, the distance to the left, the target container width minus its own width
        this.conObj.css('left', tarWidth - conWidth + tarLeft);
    } else {                //Normal display of left
        this.conObj.css('left', left - arrOffset + tarLeft);
    }
    break; 

The position of the arrow in eight cases

Again, take top-left as an example

 case 'top-left' :
    this.arrowObj.prependTo(this.conObj);
    //If con is close 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, a few thoughts on writing code:

Write the code, in the reconstruction of N times, after writing N lines of comments, suddenly thought, in fact, whether it is writing code, or life, we are an established or conventional premise or specification. And once this norm is broken, the previous work is often lost, if not, often very hurt. Examples range from code to society