title: Leaflet - styling a tooltip
body: <p>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.</p>
  
  <p>The tooltip in question needs to have a white background, with a thick black border, bold text, and transparent.</p>
  
  <p>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).</p>
  
  <p>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:</p>
  
  <pre><code>layer.bindTooltip("&lt;div style='background:blue;'&gt;&lt;b&gt;" + area.toFixed(1) + "&lt;/b&gt;&lt;/div&gt;", 
  {
      direction: 'right',
      permanent: false,
      sticky: true,
      offset: [10, 0],
      opacity: 0.75,
      backgroundColor: 'black'
  });
  </code></pre>
  
  <p>I've tried a few variations I remember from html, as well as using something along the lines of:</p>
  
  <pre><code>layer.bindTooltip("&lt;div style='background:blue;'&gt;&lt;b&gt;" + area.toFixed(1) + "&lt;/b&gt;&lt;/div&gt;", 
  {
      direction: 'right',
      permanent: false,
      sticky: true,
      offset: [10, 0],
      opacity: 0.75,
      className: 'leaflet-tooltip'
  });
  </code></pre>
  
  <p>And changing leaflet-tooltip in the leaflet.css file to:</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>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).</p>
  
  <p>EDIT - pictures added:</p>
  
  <p><a href="https://i.stack.imgur.com/HIfQ6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HIfQ6.png" alt="What tooltip currently looks like (with blue background)"></a></p>
  
  <p><a href="https://i.stack.imgur.com/9bna5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9bna5.png" alt="What tooltip should look like (or rough approximation)"></a></p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/VCHyc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VCHyc.png" alt="Nearly there"></a></p>
  
  <p>Code for the css:</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>FINAL EDIT - found, thanks to <a href="https://stackoverflow.com/questions/35353003/how-can-i-hide-tail-triangle-on-popup">this post</a>. 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):</p>
  
  <pre><code>.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);
  }
  </code></pre>