GeoTooltip Ready 24.4.0+
GeoTooltip is a component used to display a tooltip. Using this component
you can render complex HTML tooltips in a safe and reactive way.
Properties
| Prop name | Type | Default value | Description |
|---|---|---|---|
position
| enumPropertyFactory({
componentName: 'GeoTooltip',
propertyName: 'position',
enumDictionary: POSITIONS,
defaultValue: POSITIONS.top
}) | Show description | |
alignment
| enumPropertyFactory({
componentName: 'GeoTooltip',
propertyName: 'alignment',
enumDictionary: ALIGNMENTS,
defaultValue: ALIGNMENTS.middle
}) | Show description | |
delay
| number |
0
| Show description |
visible
| boolean |
undefined
| Show description |
forcedTriggerTarget
| null | Show description | |
static
| boolean |
false
| Show description |
Slots
| Name | Description |
|---|---|
default | Use this slot to customize tooltip’s content |
Constants
| Name | Value |
|---|---|
POSITIONS | Show definition |
ALIGNMENTS | Show definition |
Examples
Basic
Position
Alignment
NOTE
We use document.querySelector in demos for simplicity's sake.
In production we recommend using refs (opens new window).
We do not use them here because they are not reactive by default.
To make refs reactive we suggest using ReactiveRefs (opens new window).
To not use non-default behaviours in the demos and keep them simple, we do not load that plugin and hence we are forced to use a different approach.