---
layout: default
permalink: /popup-css
---

<div class="callout secondary" style="margin-top: 20px">
<h3>CSS for popup tips.</h3>
</div>

<div>
    <div class="leaflet-container" style="width: 200px; height: 450px; margin-bottom:20px; background-color: #C0ffC0; float: left;">       
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-south-east" style="margin-top: 20px; margin-left: 20px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards south / east.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-east-south" style="margin-top: 90px; margin-left: 30px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards<br/>east / south.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-east" style="margin-top: 180px; margin-left: 30px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards<br/>east.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-east-north" style="margin-top: 270px; margin-left: 30px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards<br/>east / north.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-north-east" style="margin-top: 380px; margin-left: 20px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards north / east.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
    </div> 
    
    <div class="leaflet-container" style="width: 200px; height: 450px; margin-bottom:20px; background-color: #C0ffC0; float: left;">
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-south-west" style="margin-top: 20px; margin-left: 30px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards south / west.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-west-south" style="margin-top: 90px; margin-left: 60px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards<br/>west / south.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-west" style="margin-top: 180px; margin-left: 80px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards<br/>west.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-west-north" style="margin-top: 270px; margin-left: 60px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards<br/>west / north.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-north-west" style="margin-top: 380px; margin-left: 30px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards north / west.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>      
    </div> 

    <div class="leaflet-container" style="width: 200px; height: 200px; margin-bottom:20px; background-color: #C0ffC0; float: left;">
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-south" style="margin-top: 30px; margin-left: 30px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards south.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>       
       <div class="leaflet-popup leaflet-zoom-animated leaflet-resp-popup-north" style="margin-top: 120px; margin-left: 30px">
          <a href="#close" class="leaflet-popup-close-button">×</a>
          <div class="leaflet-popup-content-wrapper">
             <div class="leaflet-popup-content">Towards north.</div>
          </div>
           <div class="leaflet-popup-tip-container">
             <div class="leaflet-popup-tip"></div>
          </div>
       </div>
    </div> 

</div>