JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
<div id="map"></div>
<div id="buttons">

</div>

CSS

#map {
    height: 500px;
}

JavaScript

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([48.85, 2.35], 12);

var markers = [],
		marker, button,
    div = document.getElementById("buttons");

for (var i = 0; i < 10; i += 1) {
	marker = L.marker(getRandomLatLng()).addTo(map).bindTooltip("tooltip for marker " + i);
  markers[i] = marker;
  button = document.createElement("button");
  button.innerHTML = "Open tooltip for marker " + i;
  button.dataset.i = i;
  button.addEventListener("click", openTooltip);
  div.appendChild(button);
}

function getRandomLatLng() {
	return [
  	48.8 + 0.1 * Math.random(),
    2.25 + 0.2 * Math.random()
  ];
}

function openTooltip(event) {
	event.preventDefault();
  
  var button = event.currentTarget,
  		i = button.dataset.i;
  
  //markers[i].openTooltip();
  markers[i].fire("mouseover");
}