Alternative prompt box, alternative

Alternative prompt box, alternative

The prompt box I mentioned here refers to a prompt box that appears at the position of the icon when you move the mouse over the icon to be prompted.

Sorry, what can I say about this?

How can you achieve this?

The initial practice is to use psto create a png Image in the content area of the prompt box and a png Image pointing to the position. Then, use this image as the prompt background and enter the specified content.

Well, the idea is simple and rough, so let's implement the following.

First, you have to have two pictures mentioned above. The image production result is as follows:

Figure 1Figure 2

Now that the image is ready, the next step is to use the two images as the background.

My idea is that two pictures use two divs to nest Fig 2 (Triangle image) in figure 1 (rectangular box) and then implement the result of this prompt box.

<! DOCTYPE html> 
Run the Code as follows:

Figure 3
In this way, a simple prompt box is displayed.
However,No. In this case, the content box(Figure 1)Is constant.
That is to say, every time you use a prompt box, you have to create a separate content box.(Figure 1)To conform to specific content.
Hey, Nima, isn't it annoying? If I want to write a prompt box suitable for all the content?
Then we can improve it together.
Do you still remember Wei on the Lake of Daming? There is a repeat on the background.
Do you know about scatter.
Idea:Split the prompt box into the upper, middle, and lower areas. The upper and lower areas remain unchanged. The middle area is split into a clip. The height of the tip box automatically changes with the content area.
What does Nima mean?
See:

Figure 4

Figure 5

Figure 6
In this way, you can use repeat-y to solve the problem that you do not have to create a separate body box for separate content.
However,Wood has found that if I split it into three upper and lower areas, the height will become ugly when the content increases.
Therefore, I split it into three areas in the left, middle, and right, so that no matter how much content is changed, the width will change, which is as beautiful as possible.
For the image, see:

 Figure 7Figure 8Figure 9
Haha, okay. After the split, the idea of assembling again is like this. Finally, you can use repeat-x to change the width with the content.
The following is the implementation code:
<! DOCTYPE html> 
Run the above Code and the result is as follows:
 
Figure 10
I don't know if you have read the above Code. I suggest you take a look at it. Otherwise, you won't be able to continue...
After reading the above code, I found it a bit uncomfortable.
The prompt box should be used frequently. Why not encapsulate it into a plug-in !! In this way, you don't have to write or copy it every time you use it. This definitely affects efficiency and mood !!!
Currently, jQuery is widely used, so here we will talk about jQuery plug-in encapsulation.
Ideas:
1,The corresponding attributes are provided so that the operator can change. If the operator does not change, the default attributes are used.
2,Use the provided properties to draw the corresponding prompt box.
For details, see the following code:
(Function ($) {var tip = function (p, ths) {var _ $ ths = $ (ths); var _ $ parent = _ $ ths. parent (); _ $ ths = _ $ ths. detach ();/* p combines Custom Attributes. The default setting includes the following attributes: width of the content area of the width prompt box, and prompt content in the number content prompt box */p = $. extend ({
Width: 200, content: 'sample'}, p);/* Draw: function param: ths --> prompt box this */var Draw = function () {var children = '<div class = "tipHead"> </div>' + '<div class = "tipBody">' + p. content + '</div>' + '<div class = "tipTail"> </div>'; // Add children to the prompt box _ $ ths. append (children); // dynamically set the style of the prompt box and the width of the content area _ $ ths. addClass ('tip '). find ('. tipBody '). width (p. width); _ $ parent. append (_ $ ths) ;}; // End_Draw return (function () {Draw (); _ $ parent = null; _ $ ths = null ;}) () ;};/* $. fn. tip: the prompt box plug-in that prompts you about Param: property --> Custom prompt box information */$. fn. tip = function (property) {tip (property, this) ;}; // End _ $. fn. timeProcess
}) (JQuery );