Let people customize the tooltip appearance more easily

[AoDev]

Hello, I'd like to be able to customize the tooltip appearance easily.

It would be easier if we could use the tooltip without inlined styles through JS and avoid "tooltip color theme" that are not useful most of the time because they don't fit the design.

It would be only about importing the css that makes the tooltip functional.
For the appearance, it would be possible to make our own styles and simply add the class to the tooltip. Without the "important!" rule to override the inlined styles.

[wwayne]

You can use the attribute class to import your custom style, but you have to use important! if you want to override some attribute that tooltip has used as default.

[AoDev]

I have read the docs about it. I would like to avoid this situation. It is happening because the appearance is set by inlining styles on the element instead of being included in an external stylesheet that could be customised at will. I feel it is ok to have "function styles" inlined. "the stuff" that makes the tooltip positioning correct, etc.

But for appearance, inlining styles this way (high in the css priority mechanism) leads to ultimate "hack" like !important. When I publish components I make sure they can be customised through external stylesheets and limit inlined styles to minimum. Just "my way" of thinking, I'll use important in the meantime. Thank you for the component :)

[wwayne]

Actually I was thinking about this for a long time, but react-tooltip is not using inline style, the component will add style to the header when you render the component, see the source code here https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L568

this is react-tooltip style source file(sass) https://github.com/wwayne/react-tooltip/blob/master/src/index.scss, sometimes you have to use !important because for example the backend color is generated by two classes .__react_component_tooltip.type-dark but you only have one class to manipulate the backend-color, so the default has higher priority, then you have to use !important

At the moment, I don't have any idea on how to get rid of !important, if you have interest, I've written an article to introduce what I did on this https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.3nstz9f4u

[AoDev]

I'll read the article for sure (but I am at work xd).

Why not using a single class for the appearance?
like .__react_component_tooltip-default that is set if no other class is passed.

I do this kind of patterns in my components, not just for styling.

<Component skinClass="my-style"/>

// component render

const cssClasses = this.props.skinClass || '__react_component_tooltip-default'

Regarding the css appending, it will still have more priority because it is appended at the bottom of the head, after the app own styles.
With 3rd parties, I can control the priority of their styles if I am the one who decides where / when it is included. (having access to the css / less / scss file)

[wwayne]

Sounds good, could a better practice for a component, I will take a try when I'm free, I'm at work too : ) , thanks for your advice.

[wwayne]

After some investigation I find it is hard to put all style in a single class, using class group to control the tooltip placement and colour does make sense.

So closing this ticket at the moment until we find a bette solution, more example will be added to the example page.

[jeanmichelcote]

Too bad that this issue is closed because the styling of the tooltip simply does not work in my setup. I use styled-components to style my components; it is so simple to use and so obvious that it makes any other alternative look convoluted.

I don't even use css loaders nor postprocessors for styling in my webpack config. Which makes it incompatible with the way react-tooltip styles its component.

Would you have any suggestion?

[Ardhimas]

@jeanmichelcote You could make a PR allowing for custom styles.

[thomasgwatson]

Also stuck on this, FWIW

Even specifying what classes need to be manipulated would be helpful. I'm trying to just control the border color and its proving really challenging to do so.

Added a custom class .tooltip-border

It changes the border color, aside from the pointer part of the tool-tip.

I looked at the SASS (https://github.com/wwayne/react-tooltip/blob/master/src/index.scss) and tried to overwrite the relevant rules (see below) but still no love

.tooltip-border {
  border: 1px solid $red1 !important;

  &.border{
    &.place-bottom {
      &:before {
        border-bottom: 8px solid $red1 !important;
      }
    }
  }
}

[nerdess]

having to add !important is still an issue...

[dreamawakening]

This also has poor compatibility with Tailwind CSS and twin.macro (styled components for Tailwind). You can just use !important, but this shouldn't be required to style something (it's a bad practice).

[karltaylor]

A shame this is still an issue, definitely don't want to use !important, I just want to style css!