title: How to add text below a marker in leaflet?
body: <p>I created some markers on leaflet map but the only problem is that i dont know how to add a text below each marker and im not talking about popups. What I mean is that the text below the marker has to permanent. For e.g. a text below a marker on India that says "India". I have an example of what Im working on right now: <a href="https://i.stack.imgur.com/F4oay.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F4oay.png" alt="enter image description here"></a></p>
  
  <pre><code>var southWest = L.latLng(-89.98155760646617, -180), northEast = L.latLng(89.99346179538875, 180);
  var bounds = L.latLngBounds(southWest, northEast);
  var mymap = L.map('map', {
      center: [20.594, 78.962],
      maxBounds: bounds, // set max bounds for the world map
      zoom: 4, // default zoom level when the web is initiated
      zoomSnap: 0.25, // map's zoom level must be in multiple of this
      zoomDelta: 0.25, // controls how much the map's zoom level will change after a zoom
      minZoom: 3.25, // min zoom level the user can zoom out
      maxZoom: 6, // max zoom level the user can zoom in
      zoomControl: true, // allow zooming
  });
  mymap.zoomControl.setPosition('topright'); // set + and - zoom buttons to top right corner .setOpacity('0.4')
  L.DomUtil.setOpacity(mymap.zoomControl.getContainer(), 0.2); // set opacity of zoom buttons
  var MapAttribution = '&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors &amp;copy; &lt;a href="https://carto.com/attributions"&gt;CARTO&lt;/a&gt;';
  var DarkMatterUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'; // For dark theme map
  var PositronUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'; // For light theme map
  var tiles = L.tileLayer(DarkMatterUrl, { MapAttribution }).addTo(mymap); 
  // Array of marker coordinates
  var markers = [
      {
          coords:[4.21, 101.97],
          country:'Malaysia',
          label:'Malaysia',
      },
      {
          coords:[20.594, 78.962],
          country:'India',
          label:'India',
      },
      {
          coords:[35.861, 104.195],
          country:'China',
          label:'China',
      },
      {
          coords:[23.421, 53.8478],
          country:'UAE',
          label:'UAE',
      },
      {
          coords:[23.6978, 120.9605],
          country:'Taiwan',
          label:'Taiwan',
      },
      {
          coords:[0.7892, 113.9213],
          country:'Indonesia',
          label:'Indonesia',
      },
  ];
  // Edit marker icons
  var myIcon = L.icon({
      iconUrl: 'yellowcircle.png',
      iconSize: [40, 40], // size of the icon
      // iconAnchor: [],
      // popupAnchor: [],
  });
  // Loop through markers
  for(var i = 0; i&lt;markers.length; i++){
      addMarker(markers[i]);
  }
  // To add the marker coordinates
  function addMarker(props){
      var marker = L.marker(props.coords, {icon: myIcon}).bindTooltip(props.country).addTo(mymap);
      marker.on('mouseover', function(e){
          marker.openPopup(); 
      });
      marker.on('mouseout', function(e){
          marker.closePopup();
      });
  }
  // For GeoJSON features
  var StringLines = [{
      "type": "Feature",
      "geometry": {
          "type": "LineString",
          "coordinates": [
              [113.9213, 0.7892],[101.97, 4.21],[120.9605, 23.6978] // From Indonesia to Malaysia to Taiwan
              ]
      }
  }, {
      "type": "Feature",
      "geometry": {
          "type": "LineString",
          "coordinates": [
              [53.8478, 23.421],[101.97, 4.21],[104.195, 35.861],[78.962, 20.594] // From UAE to Malaysia to China to India
              ]
      }
  }];
  // Edits for LineStrings
  var LineStringColor = {
      "color": "#ff7800",
      "weight": 5,
      "opacity": 0.65
  }
  L.geoJSON(StringLines, {style: LineStringColor}).addTo(mymap); // add geoJSON features to the map
  </code></pre>