Labeling GeoJSON polylines in Leaflet

Question

I have followed Leaflet GeoJSON style and labeling to create labels for my GeoJson I achieved this using "OnEachFeature" and a "CSS" class. This is a part of the code:

CSS class

    .label {
  line-height: 1;
  margin-top: 0px;
  padding-top: 1px;
  padding-bottom: 0px;
  padding-left: 4px;
  padding-right: 4px;
background-color: true;
font-weight: bold;
color: black;
border: transparent;
box-shadow: none;
font-size:20px;
}

OnEachFeature function

   onEachFeature: function(feature, layer) {
                        layer.bindTooltip(feature.properties.nam.toString(), 
                        {permanent: true, className: 'label'}
                        ).addTo(map);
   }

Instead of this rectangle with a callout as a label, I need it to be a rectangle without a callout (I mean the little triangle that each rectangle has) and each one has to be above the shape line.

This is what I get:

Does anyone have an idea what could be going on?

Answer 1

To position tooltip above, you have to use direction: 'top' tooltip option. To get rid of callout and for other tooltip style adjustments, just modify appropriate Leaflet CSS styles.

For example, with the direction: 'top' tooltip option and the following CSS styles

.leaflet-tooltip-top {
  line-height: 1;
  margin-top: 0px;
}
.leaflet-tooltip-top::before {
  display: none
}
.leaflet-tooltip {
  padding-top: 1px;
  padding-bottom: 0px;
  padding-left: 4px;
  padding-right: 4px;
}

you will achieve this effect: