JQuery probe location of the prompt of toolTip box details
- 2020-03-29 23:44:30
- OfStack
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