0

Hello I am new to using fluent ui and applying it to my react.

I am trying to align my tooltip with my textfield and trying to change background color to black and font to white. Also increasing the width and height of tooltipbox.

enter image description here

     const inlineBlockStyle = (styleProps) => {
    
            const chkStyles = {
    
                root: [{
    
                    display: 'inline-block',
                    color: 'white',
                    backgroundColor: black,
                    height: '100px',
                    width: '500px,'
                }],
    
            };
    
            return chkStyles
        };


   <TooltipHost
       content="If your school is not on our list, please go to the Support Page 
       and provide your schools details.  
    
       id={tooltip2Id}                                        
       calloutProps={calloutProps}
       styles={inlineBlockStyle}
    >

      <Label style={{ color: "white", fontSize: "20px" }}>  
        Please select your county and your school
         <i className="ms-Icon ms-Icon--Info" </i>
      </Label>

   </TooltipHost>
Glen Sale
  • 43
  • 2
  • 8

1 Answers1

2
const styleProps= {
  rootHovered: {
    backgroundColor: "black"
  }
};
//
<FluentPrimaryButton text = {label} styles = {styleProps} />;
Elvi Xhaferri
  • 195
  • 4