0

I'm using Leaflet library as external library in my component, I want to edit the style of its tooltip

I tried this:

 marker.bindTooltip('string',{direction:'bottom',offset:L.point(0,10),permanent:true,className:'tooltipClass'}).openTooltip();

and add this class (tooltipClass) to STYLE tab:

  .THIS.tooltipClass {
  background:red;
}

but it does not work

also I tried this for popup:

.THIS.custom-popup .leaflet-popup-content-wrapper {
  background:red;
}

but also not work

so how can I change style for external resource either by css or javascript

edit: component:

<aura:component 
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

     <ltng:require styles="/resource/leaflet/leaflet.css" />   
    <ltng:require scripts="{!join(',',$Resource.leaflet + '/leaflet.js',
                           $Resource.esriLeaflet)}"
             afterScriptsLoaded="{!c.jsLoaded}" />


    <aura:attribute name="projects" type="object__c[]"/>

     <!-- The Leaflet map object -->
    <aura:attribute name="map" type="Object"/>
    <!-- The Leaflet markers -->
    <aura:attribute name="markers" type="Object"/>
    <aura:handler name="change" value="{!v.projects}"
                  action="{!c.projectsChangeHandler}"/>


    <div class="map" aura:id="map" id="map"></div>
</aura:component>

and in javascript (jsload), I added the map:

 var map = component.get('v.map');
        var markers = component.get('v.markers');
        var projects = component.get('v.projects');
// .. here get object__c[] values
 var icon = new L.DivIcon({  
                    className:'',
                    html: '<img style="width:34px;height:37px;" src="..."/>'+
                    '<span style="font-weight:bold;font-size:9pt;">label</span>'
                              });

                    var marker = L.marker(latLng, {project: project,icon:icon,title:project.Name}).addTo(map).bindPopup(popupTemplate,{minWidth:200});
                    marker.bindTooltip('text',{direction:'bottom',offset:L.point(0,10),permanent:true,className:'tipClass'}).openTooltip();

finally, in STYLE:

.THIS.tipClass{
    background:red !important;
    color:white;
    width:200px;
}

1 Answer 1

1

CSS gets applied to HTML elements the concept of specificity. You have to increase specificity of your CSS to override leaflets style

try these 2 Options: Option 1: Add a class to the HTML element and provide your background color and make it !important. first try without !important, if it doesn't work add it then

.class {
   background:red !important;
}

Option 2: try copying 2 to 3 level of selectors of the CSS of leaflet by inspecting the DOM and give them in your lightning component CSS and see if it works

so if your markup is like this

<ul class="ul-style">
  <li class="li-style">
    <a class="a-background"><a/>
  <li/>
<ul/>

in your CSS tab of lightning components try adding

.THIS .ul-style .li-style .a-background{
 background:red;
}

If these doesn't work you have to inspect using browser developer tools like chrome and find out how it applies CSS and override it.

1
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – Adrian Larson
    Jun 28, 2017 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.