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);

Creating the Tooltip object

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 toolip 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): Tooltip

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

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.

Tooltip options

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.
content	string or HTMLElement		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.
offset	PointValue	[0, 0]	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 or HTMLElement	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.
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?: string): Promise<Tooltip>

Attach the tooltip to a map or an element that extends the Layer object and show it when hovering the mouse over the element.

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

Parameter	Type	Default	Required	Description
element	Map or Layer		Yes	The element to attach the tooltip to.
event	string	'hover'		The event to trigger the tooltip.

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]});