Basically, the tooltip is a shared form (container) present in the component that will be displayed via a subform in the target form of the main application. It contains three elements :

• An image variable : To build the image, the component relies on a number of properties. These will allow to draw an object in SVG language. It results from this, a set of calculations based on different criteria (content size, padding, radius, etc.) that will be performed in order to draw the outline of the tooltip and its arrow. The SVG will also be able to integrate a text box and a button to close the tooltip (closebox).
• A sub-form : This one allows you to integrate a form from the main database into the tooltip. The sub-form will take the place of the text box if it is defined.
• An object variable : Allows you to keep the properties of the tooltip required during various operations of the component.

This set forms what is called the tooltip or tipbox

The tooltip can be positioned manually by entering the coordinates of a point or by designating a form object as target. The component will retrieve the coordinates in this second case.

Then, it is possible to define the placement of the tooltip and its arrow :

It is also possible to define a margin and/or offset in relation to the target.

Since version 1.4.0 of AJUI_Tip, it is possible to round off the three angles of a Tip's arrow. For this purpose, four formulas are available (see the properties concerning the arrow). In this chapter, we will explain how rounding is calculated in order to understand the use of these new formulas.

First of all, it is important to specify that a Tip is always drawn to the right from its upper left corner.

The first curve is calculated from the starting point (P1) to the ending point (P3) and using the inflection point (P2). The second curve is calculated from the starting point (P4) to the ending point (P6) and using the inflection point (P5). The third curve is calculated from the starting point (P7) to the ending point (P9) and using the inflection point (P8).

The three black dots on the diagram correspond to the three angles of the initial arrow. In the case of the rounding function, they will serve as an inflection point for drawing the curves.

The six grey points on the diagram are determined by ratios that you can assign for drawing the arrow using the formulas: CornerCurveStart, CornerCurveEnd, ArrowCurve.

The CornerCurveEnd and ArrowCurve ratios will be applied to the arrow height and half of the arrow width. This will allow us to obtain the X and Y values for the position of these points (P3, P4, P6 and P7).

For CornerCurveStart, the ratio applies only in relation to the height of the arrow. The result of this calculation will then be subtracted or added in relation to the inflection points (P2 and P8) over the width.

Applying these three ratios ensures that the rounding of the arrow is rendered consistently. AJUI_Tip_Lab includes an "HDI Curves" that will allow you to play with these ratios and functions.