How to change tooltip background-color?

[jyotiarora2610]

By using tooltip theme, there are only three options "dark,light and transparent". But i want to give a custom theme to my tooltip. Please give any suggestion.

[virmelcruz]

I did it by overriding the default styles. something like this:

.tippy-tooltip {
  background-color: #DBEEF5;
  border-radius: 25px;
  color: black;
}

//if you have arrow
.tippy-popper[x-placement^=top] [x-arrow] {
  border-top: 7px solid #DBEEF5;
}

[glenngijsberts]

Any updates on this? Still unable to change any styles whatsoever. Pretty inconvenient..

[tuanthieu2993]

Thanks @virmelcruz for your reaction on the question.

@jyotiarora2610 and @glenngijsberts , Sorry for this late reply, have you tried with suggestion on changing global style, you can have more details on this https://github.com/tvkhoa/react-tippy/issues/3#issuecomment-297688807

Thanks

[felpin]

You can create a custom theme, like:

.tippy-tooltip.tomato-theme {
  background-color: tomato;
  color: yellow;
}

.tippy-tooltip.tomato-theme[data-animatefill] {
  background-color: transparent;
}

.tippy-tooltip.tomato-theme .tippy-backdrop {
  background-color: tomato;
}

And then on your Tooltip component, use theme="tomato"

[DominicTobias-b1]

Hi, I think it would be useful if there was a tooltipStyle like there is a style (which I don't really see the purpose of), for one off styling such as changing the BG colour in a couple of instances. As well as being more friendly to JS-in-CSS solutions. I think html overrides the structure and usually people just need the style.

[jazkh]

This solution will work in every situation.

In your Tooltip component, use theme="customized"

And your css file:

  .tippy-popper .tippy-tooltip.customized-theme * {
    background-color: rgb(28, 43, 83)!important;    
}

P.S You can change the name 'customized' to anything you like in both places.

[metacoding]

This is how I changed it in React using emotion css.

    <Tippy
      key={uniqueId}
      content={(<div className={className}>{contents}</div>)}
      placement={position}
      allowHTML={isHtml}
      {...events}
      {...aria}
      css={css`
        background-color: ${backgroundColor.value};
      `}
    >
      {children}
    </Tippy>