CODEWITHSUNDEEP
javascriptjqueryleaflet
swahi-ems
swahi-ems

Reputation: 71

Leaflet tooltip won't animate correctly

I need to animate tooltip binded permanently to marker (using transition CSS3), the marker is animated well but the tooltip is animated at the first time from the top left map to the marker. How to avoid this behavior?

Demo of the issue

Upvotes: 4

Views: 1619

Answers (1)

Suchit kumar
Suchit kumar

Reputation: 11859

UPDATE: try the updated code(switching over classes to get the desired result)

.anim-tooltip{
  transition: opacity 4.0s linear;
}
.anim-tooltip-custom{
  transition: all 4.0s linear;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
  <meta charset="utf-8">
  <title>Leaflet JS Bin</title>
  <style>
    #map {
      width:600px;
      height:400px;
    }
  </style>
</head>
<body>
  <button onclick="test()">TEST</button>
  <div id='map'></div>


  <script>
    // Remember to include either the Leaflet 0.7.3 or the Leaflet 1.0.0-beta1 library

    var myCenter = new L.LatLng(50.5, 30.51);
    var map = new L.Map('map', {center: myCenter, zoom: 15});

    var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    }).addTo(map);

    var marker = new L.Marker(myCenter);
    map.addLayer(marker);
    marker.setIcon(L.icon({   
      iconUrl:"https://unpkg.com/[email protected]/dist/images/marker-icon.png",
            className: 'anim-custom'
        })); 
    
    
    marker.bindTooltip("Lorem ipsum dolor sit amescing elit",{
                permanent: true,
                offset : [10,-20],
                direction : "right",
                className: 'anim-tooltip'
        }).openTooltip();

     var test = function(){
    marker.bindTooltip().closeTooltip();
      marker._icon.className="anim-tooltip-custom";
      marker._tooltip._contentNode.className=marker._tooltip._contentNode.className.replace("anim-tooltip","anim-tooltip-custom");// update the class name with animate-custom
    marker.bindTooltip().openTooltip();
      marker.setLatLng(new L.LatLng(50.502,30.512));
    }
  </script>
</body>
</html>

Upvotes: 2

Related Questions