Hover over these links.
This tooltip has 'built in mode', see `handleShow` in the source:
document.dispatchEvent(
new CustomEvent('show-tooltip', {
detail: {
target: e.target,
tooltip: html`<ix-simple-tooltip>
${target.getAttribute('data-tooltip')}
</ix-simple-tooltip>`,
placement: target.getAttribute('data-tooltip-placement'),
strategy: target.getAttribute('data-tooltip-strategy'),
},
}),
This means you only have to add the attribute `aria-describedby="tooltip"` and the text in `data-tooltip="some text"` will be shown.
You can use this same strategy and put any element as the `tooltip`.
The following properties should typically be provided via the `detail` of a CustomEvent named `show-tooltip`. (note: it is possible to customise the event name by importing `IxTooltip` and overriding the static `_hideTooltip` and `_showTooltip` properties.)
| Property | Value | Default |
|---|---|---|
| placement | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' |
No default, the 'autoPlacement' middleware will provide an optimal placement. If a placement is provided, it will be the only placement allowed. |
| strategy | 'fixed' | 'absolute' | fixed |
| tooltip | The tooltip, should be a lit `TemplateResult` provided by html`` | |
| target | The element to show the tooltip on | |
| hidingDuration | How long it takes for the tooltip to fade out. Note that if this is too low, a user will not be able to hover on the tooltip. | 500 |
| autoPlacementOptions | Have a look at the type `AutoPlacementOptions` and refer to this document. | `allowedPlacements` is set if a `placement` is provided. |
| offsetOptions | Have a look at the type `OffsetOptions` and refer to this document. | { mainAxis: 10 } |