leaflet js: how to create tooltips for L.CircleMarker? - leaflet

Question

I am wondering if there is a way to set the tooltip for L.CircleMarker?
var geojsonLayerVessel = new L.GeoJSON(null, {
pointToLayer: function (latlng){
return new L.CircleMarker(latlng, {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
title: "test"
});
}
});
tried the above code, but it is not working.

Answer 1

This does not work for CircleMarkers.
But you can create a little DivIcon and style it with rounded corners.
DivIcons do support the 'title' option.
http://jsfiddle.net/63teycsq/1/
The function to provide as pointToLayer:
function (latlng){
return L.marker(latlng,
{ icon : L.divIcon({ className : 'circle',
iconSize : [ 5, 5 ]}),
title: 'test'});
}
And the div's styling:
div.circle {
background-color: #ff7800;
border-color: black;
border-radius: 3px;
border-style: solid;
border-width: 1px;
width:5px;
height:5px;
}

Answer 2

For GeoJSON layers you can listen to the 'featureparse' event to bind popups, as per this example. Something along these lines:
var geoJsonLayer = new L.GeoJSON(null,{
pointToLayer: function (latlng){
return new L.CircleMarker(latlng, {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
});
geoJsonLayer.on('featureparse', function(e){
//Now you can bind popups to features in the layer, and you have access to
//attributes on the GeoJSON object through e.properties:
e.layer.bindPopup('Hello! ' + e.properties.someProperty);
});
//now you add some some data to your layer and add it to the map....
geoJsonLayer.addGeoJSON(someGeoJson);
map.addLayer(geoJsonLayer);
Hope this helps!