[SalesForce] Customize help text icon color in lwc

I want to have a help text with content but want to change the color of the icon in help text.

<lightning-helptext icon-name="utility:info"content="tooltip content here"></lightning-helptext>

In here I want to change the color of info icon. I have gone through icon-variant and its related style values. Lightning Web Component
Help text

There is Customize Component Styling where it is written thatlightning-helptext contains the same customizable elements as lightning-button-icon for the button icon, which supports –sds-c-button-* custom properties.

<lightning-helptext icon-name="utility:info"  content="tooltip content here" class="icn"> </lightning-helptext>

  .icn12{ 
    --sds-c-button-brand-color-background: #bb00ff;
    --sds-c-button-text-color: #f4f7f9;
  }

There i no reflect in button icon color

Best Answer

Why ".icon13" if the class name is "icn"? Try with .icn{}

Also, the css modifier is not correct, it has an extra "brand".

Try this:

.icn {
   --sds-c-button-color-background: red;
   --sds-c-tooltip-text-color: blue;
}

Sorry, I cannot add comments.

Edit: added text color.

Related Solutions

[SalesForce] Lightning Design System is overridden by styles from app.css

First on the font. one.app should be serving Salesforce Sans. What version are you currently in?

Are you scoping your component? (This means putting the .slds class on the top level of your component.) Are you using the CSS provided in the download that ends in -ltng.css?

I'm assuming you're using ui:button to get your button style? The SLDS styles are not built onto the Ligtning components yet. You can either use a simple or you can write your own button component with SLDS styles.

The scoping will give your SLDS CSS a level higher of specificity. I would not recommend using IDs or !important in your CSS.

Hope that helps.

[SalesForce] Visualforce Help Text Background Color

You can add the style attribute as below.

<span class="helpButton" id="Name-_help" style="background-color: yellow;">
     <img src="/s.gif" alt="" class="helpOrb" title="{!$Label.DS_RichTextHelpText}"/>
</span><p/>

Update

Here I have tried to mimic the Salesforce help style with the help of the “helpOrb” class supplied by the standard SFDC stylesheets.

<apex:page >
    <style>
        .vfHelpText a {
            position:relative;
        }
        .vfHelpText a span {
            display: none;
        }
        .vfHelpText a:hover span {
            display: block;
            position:absolute;
            top:1.25em;
            padding:2px 5px;
            left:-15em; width:15em;
            z-index:100;
            border:1px solid orange;
            background-color:#FEFDB9;
            color:black;
        }
    </style>
    <span class="vfHelpText">
        <apex:outputLink value="javascript:return false;">
            <img src="/s.gif" alt="" class="helpOrb" />
            <span>{!$Label.DS_RichTextHelpText}</span>
        </apex:outputLink>
    </span>
</apex:page>

Best Answer

Related Solutions

[SalesForce] Lightning Design System is overridden by styles from app.css

[SalesForce] Visualforce Help Text Background Color

Related Topic