docs: notes about html legend, tooltip and title (#10857)

* docs: notes about html legend, tooltip and title

* Update docs/configuration/legend.md

Co-authored-by: Jacco van den Berg <[email protected]>

* Update docs/configuration/tooltip.md

Co-authored-by: Jacco van den Berg <[email protected]>

* docs: notes about html legend, tooltip and title fix

Co-authored-by: Jacco van den Berg <[email protected]>

Author: dangreen

docs/configuration/legend.md

@@ -27,6 +27,10 @@ The doughnut, pie, and polar area charts override the legend defaults. To change
 | `textDirection` | `string` | canvas' default | This will force the text direction `'rtl'` or `'ltr'` on the canvas for rendering the legend, regardless of the css specified on the canvas
 | `title` | `object` | | See the [Legend Title Configuration](#legend-title-configuration) section below.
 
+:::tip Note
+If you need more visual customizations, please use an [HTML legend](../samples/legend/html.md).
+:::
+
 ## Position
 
 Position of the legend. Options are:
@@ -62,7 +66,7 @@ Namespace: `options.plugins.legend.labels`
 | `padding` | `number` | `10` | Padding between rows of colored boxes.
 | `generateLabels` | `function` | | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See [Legend Item](#legend-item-interface) for details.
 | `filter` | `function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data.
-| `sort` | `function` | `null` | Sorts legend items. Type is : `sort(a: LegendItem, b: LegendItem, data: ChartData): number;`. Receives 3 parameters, two [Legend Items](#legend-item-interface) and the chart data. The return value of the function is a number that indicates the order of the two legend item parameters. The ordering matches the [return value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description) of `Array.prototype.sort()` 
+| `sort` | `function` | `null` | Sorts legend items. Type is : `sort(a: LegendItem, b: LegendItem, data: ChartData): number;`. Receives 3 parameters, two [Legend Items](#legend-item-interface) and the chart data. The return value of the function is a number that indicates the order of the two legend item parameters. The ordering matches the [return value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description) of `Array.prototype.sort()`
 | [`pointStyle`](elements.md#point-styles) | [`pointStyle`](elements.md#types) | `'circle'` | If specified, this style of point is used for the legend. Only used if `usePointStyle` is true.
 | `textAlign` | `string` | `'center'` | Horizontal alignment of the label text. Options are: `'left'`, `'right'` or `'center'`.
 | `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between boxWidth and font.size).

docs/configuration/title.md

@@ -17,6 +17,10 @@ Namespace: `options.plugins.title`, the global options for the chart title is de
 | `padding` | [`Padding`](../general/padding.md) | `10` | Yes | Padding to apply around the title. Only `top` and `bottom` are implemented.
 | `text` | `string`\|`string[]` | `''` | Yes | Title text to display. If specified as an array, text is rendered on multiple lines.
 
+:::tip Note
+If you need more visual customizations, you can implement the title with HTML and CSS.
+:::
+
 ### Position
 
 Possible title position values are:

docs/configuration/tooltip.md

@@ -50,6 +50,10 @@ The bubble, doughnut, pie, polar area, and scatter charts override the tooltip d
 | `xAlign` | `string` | `undefined` | Position of the tooltip caret in the X direction. [more](#tooltip-alignment)
 | `yAlign` | `string` | `undefined` | Position of the tooltip caret in the Y direction. [more](#tooltip-alignment)
 
+:::tip Note
+If you need more visual customizations, please use an [HTML tooltip](../samples/tooltip/html.md).
+:::
+
 ### Position Modes
 
 Possible modes are: