Leaflet - styling a tooltip

Question

I'm trying to style a tooltip in Leaflet. Due to various changes and trying to incorporate different modules, I've been fixing a few things to how they were.

The tooltip in question needs to have a white background, with a thick black border, bold text, and transparent.

I imagined this would be fairly easy, and I've managed most of it in JS and html. However, for whatever reason, I cannot get CSS to work with it (addressing the leaflet.css file).

The code below is my main code at the moment (yes, with blue rather than white - using it as a test). It is perfect except the remainder of the tooltip (outside the div) is white rather than black:

layer.bindTooltip("<div style='background:blue;'><b>" + area.toFixed(1) + "</b></div>", 
{
    direction: 'right',
    permanent: false,
    sticky: true,
    offset: [10, 0],
    opacity: 0.75,
    backgroundColor: 'black'
});

I've tried a few variations I remember from html, as well as using something along the lines of:

layer.bindTooltip("<div style='background:blue;'><b>" + area.toFixed(1) + "</b></div>", 
{
    direction: 'right',
    permanent: false,
    sticky: true,
    offset: [10, 0],
    opacity: 0.75,
    className: 'leaflet-tooltip'
});

And changing leaflet-tooltip in the leaflet.css file to:

.leaflet-tooltip {
    position: absolute;
    padding: 6px;
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #222;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

Any ideas welcome. I'd love to just use some simple html but if CSS is viable (unsure what I'm doing wrong, I grunt build my project each time to take care of the JS, and also do a standard build which I assume does the CSS).

EDIT - pictures added:

EDIT - realised my issue was that I was still linking to the online css, not my own. Remedied. Now trying to style the "point" at the left-hand side, which is still white:

Code for the css:

.leaflet-tooltip-own {
position: absolute;
padding: 5px;
background-color: rgba(0, 0, 0, 0.5);
border: 0px solid #000;
border-radius: 4px;
color: #000;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

FINAL EDIT - found, thanks to this post. The style options for the triangle (or "tail") are located in .leaflet-tooltip-left:before and .leaflet-tooltip-right:before. New css code (with simply the border-left-color and border-right-color changed - didn't have to make any changes to the js as this seems to be inherited):

.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip-own {
position: absolute;
padding: 4px;
background-color: rgba(0, 0, 0, 0.4);
border: 0px solid #000;
color: #000;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

Answer 1

So, a few issues.

One, I was still linking to the css on the internet rather than using my own. Oops!

Styling through the css, had some issues with the triangle/tail, which can be taken care of in the .leaflet-tooltip-left:before and leaflet-tooltip-right:before bits.

CSS:

.leaflet-tooltip-left:before {
    right: 0;
    margin-right: -12px;
    border-left-color: rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip-right:before {
    left: 0;
    margin-left: -12px;
    border-right-color: rgba(0, 0, 0, 0.4);
    }
.leaflet-tooltip-own {
    position: absolute;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 0px solid #000;
    color: #000;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

And the js which calls the tooltip:

layer.bindTooltip("<div style='background:white; padding:1px 3px 1px 3px'><b>" + area.toFixed(1) + "</b></div>", 
{
    direction: 'right',
    permanent: false,
    sticky: true,
    offset: [10, 0],
    opacity: 0.75,
    className: 'leaflet-tooltip-own' 
});

This post was pretty useful.