Tooltip

The Tooltip object displays a tooltip element when hovering over a marker or polyline.

Tooltip extends Overlay.

Example usage

const map = G.map('map1', {
    latitude: 40.730610,
    longitude: -73.935242,
    zoom: 8
});
map.show();
const marker = G.marker({
    latitude: 40.730610,
    longitude: -73.935242,
    map: map,
    title: 'My Marker',
    tooltip: 'This is a tooltip'
});

The tooltip parameter on the Marker creates the Tooltip object with the content specified. It's then displayed when hovering over the marker.

Tooltips are typically attached to a marker or polyline and show when hovering that element. What makes them different from a popop or other overlay object is that they automatically show when hovering on something else.

However, you can also manually display the tooltip. In the example below we show the tooltip at a specific location on the map. This isn't the common use case, but it is possible.

const tooltip = G.tooltip({
    className: 'my-tooltip',
    content: 'This is a tooltip',
    map: map,
    position: { lat: 40.7, lng: -73.9 }
});

Instead of passing the tooltip parameter on the Marker, you can use the attachTo method to attach the tooltip to a marker. It will show when the marker is hovered.

const marker = G.marker({
    latitude: 40.730610,
    longitude: -73.935242,
    map: map,
    title: 'My Marker',
});
const tooltip = G.tooltip({
    className: 'my-tooltip',
    content: 'This is a tooltip',
});
tooltip.attachTo(marker);

You can also attach the tooltip to a map to show when hovering over the map. The tooltip will follow the mouse as it moves around over the map.

const map = G.map('map', { center: [40.7128, -74.0060] });
map.show();
const tooltip = G.tooltip({
    className: 'my-tooltip',
    content: 'This is a tooltip',
});
tooltip.attachTo(map);

G.tooltip(options?: TooltipValue): Tooltip

The following are equivalent ways to set up the Tooltip object.

No parameters.

G.tooltip(): Tooltip

const tooltip = G.tooltip();

Pass the tooltip options.

G.tooltip(options: TooltipOptions): Tooltip

Parameter	Type	Required	Description
options	TooltipOptions	Yes	The tooltip options.

const tooltip = G.tooltip({
    className: 'my-tooltip',
    content: 'This is a tooltip',
});

Pass a tooltip object.

G.tooltip(object: Tooltip): Tooltip

In this case the Tooltip object is simply returned.

Parameter	Type	Required	Description
object	Tooltip	Yes	The existing tooltip object.

const tooltip = G.tooltip(existingTooltipObject);

Pass the tooltip content.

G.tooltip(content: string|HTMLElement|Text): Tooltip

Parameter	Type	Required	Description
content	string, HTMLElement, or Text	Yes	The tooltip content.

When a string of content is passed, the tooltip class name is added to the tooltip container.

const tooltip = G.tooltip('My tooltip content');

const content = document.createElement('div');
content.classList.add('myTooltipClass');
content.innerHTML = 'This is my tooltip';
const tooltip = G.tooltip(content);

TooltipValue type

The attachTooltip() function and other methods that accept a tooltip value accept TooltipValue as the value type.

The TooltipValue can be one of the following values:

Tooltip object
TooltipOptions object
A string containing the content for the tooltip
An HTMLElement that will be the content for the tooltip.
A Text node that will be the content for the tooltip.

Type TooltipCallback

Anywhere a tooltip value is accepted you can pass a function instead of a fixed value. It's called every time the tooltip is about to be shown and is passed the object that the tooltip is attached to.

(target?: Map | Layer) => TooltipValue

It returns a TooltipValue, so it can return any of the following.

A string, HTMLElement or Text node, which becomes the content of the tooltip.
A TooltipOptions object, which is set on the tooltip. Use this when more than the content changes.
A Tooltip object, which is shown instead.

marker.attachTooltip((marker) => marker.getData('name'));

This is the same idea as PopupCallback, and works the same way.

The type that combines the two is AttachTooltipValue, which is TooltipValue | TooltipCallback. That's what attachTooltip() accepts.

When the callback returns a Tooltip object, that tooltip is the one shown and the tooltip that attachTooltip() returned is never displayed. If the callback returns a different tooltip than the one currently showing, the one showing is hidden first.

When a hover tooltip is attached to the map, the callback is called when the mouse moves over the map. It isn't called again as the mouse moves around. The tooltip that is showing just follows the cursor.

A data layer uses its own version of the callback, DataTooltipCallback, which is passed the DataFeature that the mouse is over. See Attaching to a data layer.

Attach event type

Type AttachEventValue

The events that can show an attached tooltip. This is the same type that popups use. See AttachEventValue.

'click' | 'clickon' | 'hover'

The default for a tooltip is hover.

Attaching to a data layer

A tooltip can be attached to every feature in a DataLayer, or to a single DataFeature. The value is a DataTooltipValue, which accepts the same things as a TooltipValue plus a DataTooltipCallback function. A string of content can hold {property} placeholders, which are replaced with the properties of the feature that the tooltip is shown for. See Tooltip value type for more details.

map.data.attachTooltip('{name}');

A tooltip attached to a single feature takes precedence over one attached to the whole layer. A data layer can have both a tooltip and a popup attached at the same time.

Type TooltipOptions

Option	Type	Default	Description
center	boolean	true	Whether to center the tooltip horizontally on the element. Useful if the tooltip is on a marker. If this is `true` then `transform: translate(-50%, 0)` is added to the tooltip container `div`.
className	string		The class name(s) for the tooltip container. This replaces the `tooltip` class name that is added when the tooltip is created with a string of content.
content	string, HTMLElement, or Text		The content for the tooltip.
event	string	'hover'	The event to trigger the display of the tooltip. Allowed values are `click`, `clickon`, and `hover`. This is an alternate way of setting the trigger event than passing the event to attachTo or attachTooltip.
map	Map		The map to display the tooltip on. Setting this shows the tooltip on the map.
offset	PointValue	[0, 4]	The x/y pixel offset for the tooltip.
position	LatLngValue		The tooltip position.
styles	object		An object of styles to apply to the tooltip.
theme	string	'default'	The theme to use for the tooltip. Set to 'none' to not have any default styles and to use your own. Note, if `center` is `true` then `transform: translate(-50%, 0)` will still be set to horizontally center the tooltip on the element.

Properties

Properties inherited from Overlay.
Properties inherited from Layer.

Property	Type	Description
center	boolean	Whether to center the tooltip horizontally on the element. This does the same as the `center` option.
content	string, HTMLElement, or Text	The content for the tooltip. This does the same as the `content` option.
event	string	The event to trigger the display of the tooltip. Allowed values are `click`, `clickon`, and `hover`. This is an alternate way of setting the trigger event than passing the event to attachTo or attachTooltip. An error is thrown if any other value is set.
theme	string	The theme to use for the tooltip. This does the same as the `theme` option.

Methods

Methods inherited from Overlay.
Methods inherited from Layer.
Methods inherited from Evented.
Methods inherited from Base.

attachTo

attachTo(element: Map | Layer, event?: 'click' | 'clickon' | 'hover', callback?: TooltipCallback): Promise<Tooltip>

Attach the tooltip to a map or an element that extends the Layer object. By default the tooltip is shown when hovering the mouse over the element.

Elements that extend Layer include Marker, Polyline, InfoWindow, and Popup.

A tooltip can only be attached once. Calling attachTo() again on the same tooltip does nothing.

Parameter	Type	Default	Required	Description
element	Map or Layer		Yes	The element to attach the tooltip to.
event	AttachEventValue	'hover'		The event to trigger the tooltip. If it's not set then the `event` option is used.
callback	TooltipCallback			A function that works out what to show each time the tooltip is displayed. Usually you'd pass the function to attachTooltip() instead of using this directly.

Allowed event values include:

click - Toggle the display of the tooltip when clicking on the element.
clickon - Show the tooltip when clicking on the element. It will always be shown and can't be hidden once the element is clicked. This may be useful if you want to show a tooltip each time you click on the map.
hover - Show the tooltip when hovering over the element. Hide the tooltip when the element is no longer hovered.

const tooltip = G.tooltip({
    className: 'my-tooltip',
    content: 'This is a tooltip on a marker',
});
tooltip.attachTo(marker);

const tooltip = G.tooltip({
    className: 'my-tooltip',
    content: 'This is a tooltip on a map',
});
tooltip.attachTo(map, 'clickon');

hasContent

hasContent(): boolean

Returns whether the tooltip has any content set.

if (tooltip.hasContent()) {
    // Do something
}

setContent

setContent(content: string | HTMLElement): Tooltip

Set the content for the tooltip.

Parameter	Type	Required	Description
content	string or HTMLElement	Yes	The tooltip content.

tooltip.setContent('My Tooltip');

tooltip.setContent('<b>Some bold HTML</b>');

const div = document.createElement('div');
div.style.background = '#fff';
div.style.color = '#ff0000';
div.style.padding = '2px';
div.innerHTML = 'HTMLElement tooltip';

tooltip.setContent(div);

setOptions

setOptions(options: TooltipOptions): Tooltip

Set the options for the tooltip.

Parameter	Type	Required	Description
options	TooltipOptions	Yes	The tooltip options.

tooltip.setOptions({className: 'my-class', position: [38.6270, 90.1994]});

Tooltip

Example usage

Creating the Tooltip object

TooltipValue type

Tooltip callback type

Attach event type

Attaching to a data layer

Tooltip options

Properties

Methods

attachTo

hasContent

setContent

setOptions

Example usage​

Creating the Tooltip object​

TooltipValue type​

Tooltip callback type​

Attach event type​

Attaching to a data layer​

Tooltip options​

Properties​

Methods​

attachTo​

hasContent​

setContent​

setOptions​

Example usage

Creating the Tooltip object

TooltipValue type

Tooltip callback type

Attach event type

Attaching to a data layer

Tooltip options

Properties

Methods

attachTo

hasContent

setContent

setOptions