[CHARTS] Added custom tooltip example

docs/addons/ontimize_web_ngx_charts/configuration/00-overviewchart.md

@@ -127,4 +127,65 @@ export class CandlestickComponent {
     this.candlestick.setDataArray(DataAdapterUtils.adapter.adaptResult(data));
   }
 }
+```
+
+## Tooltip
+
+Tooltips provide valuable contextual information for charts. You can either use the default tooltip or customize it according to your needs.
+
+### Default Tooltip
+
+In some cases, you may want to enable the default tooltip without customizing it with a template. To do this, you can simply use the `show-tooltip` property, and the chart will automatically display a default tooltip with the available data.
+
+In this example, the tooltip is enabled for a *Line Chart* without the need to define a custom template:
+
+*HTML*
+
+```html
+<o-chart #lineChartDefault type="line" x-label="Time" y-label="Amount (€)" entity="EMovements" x-axis="DATE_" y-axis="MOVEMENT"
+         x-data-type="time" show-tooltip="true">
+</o-chart>
+```
+### Custom Tooltip
+
+Tooltips in charts provide valuable contextual information. This section explains how to customize tooltips for a *Line Chart* by modifying the date format, content, and style.
+
+#### Customizing Tooltip Content
+
+You can define custom tooltip templates to format the displayed data.
+
+*HTML*
+
+```html
+<o-chart #lineChartBasic type="line" x-label="Time" y-label="Amount (€)" entity="EMovements" x-axis="DATE_" show-tooltip="true" y-axis="MOVEMENT"
+      x-data-type="time" [color]="colorScheme" (onActivate)="activate($event)" (onSelect)="activate($event)">
+      <ng-template #tooltip let-model="model">
+        <strong>Date:</strong> {{model?.name | oMoment : dateArgs}}<br>
+        <strong>Value:</strong> {{model?.value | oCurrency : currencyArgs}}
+      </ng-template>
+      <ng-template #seriesTooltip let-model="model">
+        <strong>Series Tooltip:</strong> {{model?.name}} - {{model?.value}}
+      </ng-template>
+</o-chart>
+```
+
+#### Adding Interactivity
+
+You can capture tooltip-related events and customize behavior.
+
+*TS*
+
+```ts
+currencyArgs: ICurrencyPipeArgument = {
+    currencySimbol: '€',
+    currencySymbolPosition: 'right',
+    grouping: true,
+    thousandSeparator: '.',
+    decimalSeparator: ',',
+  };
+dateArgs: IMomentPipeArgument = { format: 'DD/MM/YYYY' };
+
+activate(event: any) {
+  console.log("Tooltip activated:", event);
+}
 ```

docs/aditional-information/52-versions.md

@@ -29,13 +29,16 @@ In this section you can check the different releases of **OntimizeWeb** and its
     </thead>
     <tbody>
      <tr>
+        <td>15.5.1</td>
+        <td rowspan="25">15.0.0</td>
+        <td rowspan="25">15.0.1<br>15.0.0</td>
+        <td rowspan="25">15.1.4<br>15.1.3<br>15.1.2<br>15.1.1<br>15.1.0<br>15.0.1<br>15.0.0</td>
+        <td rowspan="25">15.1.2<br>15.1.1<br>15.1.0<br>15.0.0</td>
+        <td rowspan="25">15.0.3<br>15.0.2<br>15.0.1<br>15.0.0</td>
+        <td rowspan="25">15.1.0<br>15.0.0</td>
+    </tr>
+    <tr>
         <td>15.5.0</td>
-        <td rowspan="24">15.0.0</td>
-        <td rowspan="24">15.0.1<br>15.0.0</td>
-        <td rowspan="24">15.1.3<br>15.1.2<br>15.1.1<br>15.1.0<br>15.0.1<br>15.0.0</td>
-        <td rowspan="24">15.1.2<br>15.1.1<br>15.1.0<br>15.0.0</td>
-        <td rowspan="24">15.0.3<br>15.0.2<br>15.0.1<br>15.0.0</td>
-        <td rowspan="24">15.1.0<br>15.0.0</td>
     </tr>
     <tr>
         <td>15.4.4</td>
@@ -45,7 +48,6 @@ In this section you can check the different releases of **OntimizeWeb** and its
     </tr>
     <tr>
         <td>15.4.2</td>
-
     </tr>
     <tr>
         <td>15.4.1</td>
@@ -110,6 +112,7 @@ In this section you can check the different releases of **OntimizeWeb** and its
   </tbody>
 </table>
 
+
 - The prefix _ontimize-web-ngx_ was omitted from the names of the addons.
 
 {: .note }