Specific UI Functions
There are a few functions in CARTO.js for creating, enabling, and disabling pieces of the user interface.
A tooltip is an infowindow that appears when you hover your mouse over a map feature with
vis.addOverlay(options). A tooltip appears where the mouse cursor is located on the map. You can customize the position of how the tooltip appears by defining the position options.
Note: If you are using
createLayer for a map object that contains an enabled tooltip, you can disable the tooltip by applying the
false value. See the cartodb.createLayer(map, layerSource [, options] [, callback])
tooltip description for how to enable/disable an interactive tooltip.
Similar to a tooltip, an infobox displays a small box when you hover your mouse over a map feature. When viewing an infobox on a map, the position of the infobox is fixed, and always appears in the same position; depending on how you defined the position values for the infobox.
cartodb.vis.Vis.addInfowindow(map, layer, fields [, options])
Infowindows provide additional interactivity for your published map, controlled by layer events. It enables interaction and overrides the layer interactivity. A pop-up information window appears when a viewer clicks on a map feature.
|map||native map object or leaflet.|
|layer||cartodb layer (or sublayer).|
|fields||array of column names.
Note: This tells CARTO what columns from your dataset should appear in your infowindow.
|infowindowTemplate||allows you to set the HTML of the template.|
|templateType||indicates the type of template (
Tip: See How can I use CARTO.js to create and style infowindows? for an overview of how to create infowindows.
An infowindow object, see sublayer.infowindow
The following example displays how to enable infowindow interactivity with the “click” action. This is the default for infowindows.
Example (Infowindow with Tooltip)
The following example displays how to enable infowindow interactivity with the mouse “hover” action. This is referred to as a tooltip, and is defined with