Edit button tooltip color Prime React

Question

i'm trying to change the background color of a tooltip, i'm using prime react button (https://primefaces.org/primereact/showcase/#/tooltip).

Tooltip image

My code:

<DebtorClientColumn>
   <Tooltip tooltip="Mensagem do tooltip" tooltipOptions={{ position: "bottom" }}>
      <DebtorIcon
        data-testid={`debtor-icon-${client._id}`}
       />
   </Tooltip>

I've tryed to style the DebtorClientColumn and the Tooltip but both doesn't work:

const Tooltip = styled(Button)`
    .p-tooltip{
        background-color: ${Colors.white} !important;
        color:  ${Colors.white} !important;
    }   
    
    .p-tooltip-arrow     {
        background-color: ${Colors.white} !important;
        color:  ${Colors.white} !important;

    }
    
    .p-tooltip-text      {
        background-color: ${Colors.white} !important;
        color: ${Colors.strawberry} !important;

    }
`

const DebtorClientColumn = styled.div`
    display: flex;
    flex-direction: row;

    .p-button, .p-button:enabled:active, .p-button:enabled:hover{
        background-color: ${Colors.white};
        border: none;
        font-size: 0px
    };

    .p-button:enabled:focus {
        box-shadow: none
    };

    .p-tooltip{
        background-color: ${Colors.white} !important;
    }   
    
    .p-tooltip-arrow     {
        background-color: ${Colors.white} !important;
    }
    
    .p-tooltip-text      {
        background-color: ${Colors.white} !important;
        color: ${Colors.strawberry} !important;
    }
`

Bad tagging primefaces is JSF and has nothing to do with react — Kukeltje, Jun 09 '20 at 13:29

gdh · Answer 1 · 2020-06-09T14:43:45.053

0

Use tooltipOptions and provide a custom class.

Working demo (hoverover on the button)

JSX

       <Button
          tooltipOptions={{
            className: "hoverClass",
            showDelay: 500,
            hideDelay: 101300
          }}
          type="button"
          label="Save"
          icon="pi pi-check"
          tooltip="Click to proceed"
        />

CSS

.hoverClass .p-tooltip-text {
  background-color: red !important;
}

Edit:

Tool tips are portals, they are a separate render tree. Styled component's classes are scoped to the element that has been styled. You can target styled elements and the elements inside it but when it comes to portals, you cannot apply classes. See github issue here.

So in your case, for styling tooltip use regular css as mentioned in this answer.

edited Jun 09 '20 at 14:43

answered Jun 09 '20 at 14:13

gdh

13,114
2
16
28

just realised that you are uisng styled component... i will update my answer shortly. – gdh Jun 09 '20 at 14:19
hi, thanks for help but isnt working using a className – Luiza Silva Jun 09 '20 at 16:56
yes, it doesn't work if you provide the class name with styled components. Just for tooltip use the class name from regular css as mentioned in the answer – gdh Jun 09 '20 at 22:43

score 0 · Accepted Answer · answered Jun 10 '20 at 14:21

You can use the styled component joining the Icon

Here you can see the column or the main component that should render your tooltip

const Container = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: center;

    &:hover ${Tooltip} {
        display: inline;
        text-align:center
    }
  `

here the tooltip component:

const Tooltip = styled.div`
    display: none;
    position: absolute;
    margin-top: 28px;
    border-radius: 4px;
    box-shadow: 0 1px 15px 0 black;
    background-color: ${Colors.white};
    padding: 6px;
`;

you should handler the component using:

 <Container>
  <Tooltip />
</Container>

Edit button tooltip color Prime React

2 Answers2