3. Life cycle of a tooltip

Phase 1 : initialization and configuration

The first phase consists of defining the properties of the tooltip that will be displayed. To do this, the component offers a method that generates a base object representing a default definition. Then the user is free to use the functions attached to the object to customize its properties as he wishes. Note that the component proposes to import and export these objects in JSON format, this allows to use templates.

This step is very important, because all the other steps will be based on what has been defined in the object.

Phase 2 : calculations and generation

The second phase that is the most significant for the component is the creation of the tooltip based on its definition. During this phase, it will be in charge of retrieving the object's properties in order to perform a series of calculations and controls in order to generate/assign the different elements that will compose this set called the tooltip or tipbox.

This phase ends with the positioning of the tooltip according to the target and the associated elements that have been discussed previously.

Phase 3 : Display

The third phase consists in making the tooltip visible to the user. It is automatically triggered at the end of the previous step.

lts appearance can be done in two different ways. ln the first case simply by changing the object from an invisible to a visible state. In the second case, if the user has set a fade effect in the display (fade in effect) then the component will gradually increase its opacity until it reaches its final shape.

Phase 4 : Life span and animations

ln the fourth phase, the component takes care of the display duration or lifetime and the animations previously configured in phase 1. Currently two animations are available, the jump and the blink. It is not possible to Iaunch several animations simultaneously for the same tooltip. The component will Iaunch a single animation during this phase. The priority is the blinking if both animations are defined and activated. Animations are sensitive to the life span of the object.

By default, the lifetime of a tooltip is equal to zero (indeterminate and therefore unlimited display) and therefore does not impact the triggering of an animation. On the other hand, if the calculated time of an animation is greater than the defined lifetime then the component will not finish the animation and hide the tooltip.

Phase 5 : Closing

The fifth phase is automatically triggered and managed by the component if a lifetime is defined. Otherwise, it is up to the user to activate it either by using the close button on the tooltip (CloseBox) if it is active, or by triggering the component method that allows it to be hidden. It should be noted that if other tooltips are generated and if it is the same instance then the closing will be done automatically.

As for the closing itself, it is done in the same way as for the display but in the opposite direction. That is, either by changing from visible to invisible of the object, or by fading out, in which case the component gradually reduces the opacity of the Tip to zero %.