Detailed analysis of jQuery detection position prompt pop-up window (toolTip box)

Here I used jQuery to make a pop-up js and made a small demo. Here is a brief summary:

Direction

Depending on the current position of the mouse, the arrow points in different directions:

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

Priority

The priority of each of the above situations is reduced in order

Detect ideas

The basic idea of detection is:

First of all, it is also a prerequisite to determine whether the height or width of the container is twice the corresponding height or width of the pop-up window. The reason why it is twice is because the critical point is the midpoint of each side of the target container

/*
* First determine whether the height or width of the target container is twice the sum of the corresponding height or width of the container and the arrow size, otherwise, an error will be reported. The reason why it is 2 times 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 to detect the left side first, and then the right side. If the left and right sides cannot be accommodated, then the top side will be checked, exclude both, and then consider the bottom side. When detecting the left and right sides, first consider whether the top can be lowered; when detecting the upper and lower sides, first consider whether the distance between the left and right sides is large.

* 1.When detecting the left side, judge whether the upper and lower distance can be put down by the arrow offset. If one cannot be put down (such as top), it will be ['top', 'left'], right Same side

* 2.When detecting up and down, judge whether the left and right distance can be lowered by the arrow offset (the default is up, that is, top). If there is one side that cannot be lowered, it is the side where the mouse is tilted (if left

* Default is left, top.
*/

Judgment based on specific circumstances:

•According to the priority, first determine whether the pop-up window can be dropped on the right side of the mouse:

◦If you can put it down, then judge whether you can put in another arrow

■If you can let it go

■ Then determine whether an arrow can be placed on the top, including the offset of the arrow. If it can

■ If the arrow can be placed at the top including the offset and will not exceed the height of the target container, then it is left-top

■ Otherwise, if the top is greater than the height of the pop-up window, and the arrow can be dropped at the bottom including its offset, it is left-bottom

■ Otherwise, if it is judged that arrows and pop-up windows can be placed at the bottom, then top-left

■ Otherwise, based on our prerequisites, it is bottom-left

■If it cannot be put down, judge whether the pop-up window and arrow can be put down at the bottom

■If possible, top-left

■ Otherwise, bottom-left

◦ If you can’t put it down, then after considering left, change to right, the same idea

The situation and location of eight pop-up windows

Example top-left

Copy code The code is as follows:

 case 'top-left' :
 // top plus arrow size
 this.conObj.css('top', top tarTop);
 // Determine left distance
 if ( left < ; arrOffset ) {
                                                                                                                                                                                            If it cannot support its own distance on the right (conWidth - arrOffset), the left value will be reduced, and the arrow will follow the mouse to align its right side with the container 
 // Normally displayed left, minus the required width on the right side ((conWidth - arrOffset) - right ), left - arrOffset - ((conWidth - arrOffset) - right ), we get tarWidth - conWidth
 // Another way of thinking, stick to the right, that is, the distance to the left is, the width of the target container minus itself Width
 this.conObj.css('left', tarWidth - conWidth tarLeft);
 } else { // Normally displayed left
 this.conObj.css('left', left - arrOffset tarLeft) ;
 }
 break; 

The situation and position of the arrow in eight situations

Similarly take top-left as an example

Copy the code The code is as follows:

case 'top-left' :
this.arrowObj.prependTo(this.conObj);
// If con is close to the right, at this time, 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, let’s talk about some insights when writing code:

After refactoring the code written N times and writing N lines of comments, I suddenly thought that in fact, whether it is writing code or living, we all have an established or conventional premise or standard. And once this norm is broken, all previous efforts are often wasted, and even if it is not, it is often very hurt. Examples range from code to society, without exception

Related labels：

jquery Pop-ups

source：php.cn

Previous article：How to write jquery attribute selector not has row hover highlight_jquery Next article：Use jQuery to solve the difference between createElement methods under IE and FireFox_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Detailed analysis of jQuery detection position prompt pop-up window (toolTip box)_jquery