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.


Prop name Type Default value Description
position enumPropertyFactory({ componentName: 'GeoTooltip', propertyName: 'position', enumDictionary: POSITIONS, defaultValue: }) 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


Name Description

Use this slot to customize tooltip’s content


Name Value
POSITIONS Show definition
ALIGNMENTS Show definition






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.

Tooltips on GeoButton

Tooltips on FontAwesomeIcon

Tooltips on input

Tooltips on GeoDropdownCompactButton

Tooltips with changing TriggerTarget

Tooltips on GeoSegmentedControlItem

Static tooltip

Two static tooltips