Add custom bindTooltip class - css

Question

I am trying to add custom class to my bindTooltip but the new class do not show up. My method based on this question.
My custom popup class is working fine but if I want to overwrite the tooltip class than it is now working.
My JS code:
var PopupClass={'className': 'class-popup'}
var TooltipClass={'className': 'class-tooltip'}
L.marker(
[46.17319713, 21.34458608],
{icon: OnlineMarker}
).bindPopup(
'Test Popup',
PopupClass
).bindTooltip(
'Test Tooltip',
{direction: 'top', permanent: true, offset: [10,0]},
TooltipClass
).addTo(MyMap)
My CSS code:
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background:#2980b9;
color:#fff;
font-size:10px;
line-height:10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color:#2980b9;
}
.class-popup .leaflet-popup-tip-container {
width:40px;
height:20px;
}
.class-popup .leaflet-popup-tip {
background:#2980b9;
}
/* tooltip-class*/
.class-tooltip{
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}

Answer 1

You have 2 issues:
You try to specify your Tooltip class using a 3rd argument of .bindTooltip, which does not do anything as per Leaflet doc. Instead, you should merge your className key in the 2nd argument (options). For that, you can either:
write it directly within the options
extend your TooltipClass with your options: L.Util.extend(myOptions, TooltipClass)
use the ES2018 spread operator to do the same as the above point.
Your .class-tooltip selector in CSS is not enough to override the default Leaflet style. Increase your selector specificity, e.g. adding the Leaflet tooltip class: .leaflet-tooltip.class-tooltip
var MyMap = L.map('map').setView([46.17319713, 21.34458608], 11);
var PopupClass = {
'className': 'class-popup'
}
var TooltipClass = {
'className': 'class-tooltip'
}
L.marker([46.17319713, 21.34458608])
.bindPopup('Test Popup', PopupClass)
.bindTooltip('Test Tooltip', {
direction: 'top',
permanent: true,
offset: [10, 0],
//'className': 'class-tooltip'
...TooltipClass // using spread operator (ES2018)
}, TooltipClass) // 3rd argument does not do anything
.addTo(MyMap);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(MyMap);
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background: #2980b9;
color: #fff;
font-size: 10px;
line-height: 10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color: #2980b9;
}
.class-popup .leaflet-popup-tip-container {
width: 40px;
height: 20px;
}
.class-popup .leaflet-popup-tip {
background: #2980b9;
}
/* tooltip-class*/
.leaflet-tooltip.class-tooltip {
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>