Just like the floating message in the above two pictures, it has beautiful arrows.

Next, we will explain it step by step!

1. JS function that triggers floating prompt: showmenu ();

The static\js\common.js file has 872 lines, which is the definition of this function. It doesn't matter if you don't understand this function, you can use it. Let's explain how to use it.

Second, the use of showMenu ():

The JS file defined by the above functions is in the core JS of DZ, so we don't need to reload the file when using it, because the system has already loaded the file for you, so we can use it directly, but only if it is in DZ system, such as any page template file, plug-in and single page template file of DZ. (Click to see how to make Discuz! Single page), beyond the DZ system accident, can not be used.

First of all, it must be clear that this effect must consist of two parts:

1, display layer (the content directly displayed in the template will trigger the floating layer when the mouse moves up);

2. Hide the floating layer (this is hidden, it is not displayed by default, and the display will only be triggered when the mouse is placed on the display layer).

So, we set up two components respectively.

The effect is as follows:

When the mouse is placed on the text, the floating layer is activated and displayed.

It should be pointed out that:

These are the basic functions of the function. Let's explain it in detail and beautify the suspension with arrows.

Third, floating tips with arrows.

Look at the effect of the above picture. Maybe the position of the pop-up layer and the position of the arrow are not our ideal positions. We can adjust div ID = "test _ menu" class = "tip tip _ 4" style = "display: none;" & gt and

Look at the picture above. Does the floating pop-up window move slightly to the left? The margin on the left here is-100px; This means moving 100 pixels to the left.

Similarly, the arrow should move to the right, as shown below:

As shown in the above figure, the arrow moves to the right by 1 10 pixels.

In addition, if you want to modify the width and height of the pop-up floating layer, you can also add CSS in this area to define the width and height values.