mohsinulhaq/react-popper-tooltip

Style.css doesn't work on IE11

LodewijkSioen opened this issue · 3 comments

Describe the bug
Since #107 the default css uses css variables. This is not supported in IE11 (which sadly we still have to support.

To Reproduce
Steps to reproduce the behavior:
Open a tooltip on css: there is no background on the popup.

Expected behavior
We would like the popup to have a background

Screenshots
afbeelding

Desktop (please complete the following information):

  • OS: windows
  • Browser: Internet Explorer
  • Version: 11

Additional context
I see two solutions here:

  • drop the variables and repeat the colors everywhere
  • strip the varibles with postCss or something

The point of the variable was to allow users to override the colors at a central level, which won't be possible if we repeat them.
One thing you could do is copy our CSS file to your project and replace vars with the color literals.
Would that work for you?

I understand your reasoning. Still, this means that IE11 is not really supported. That said, we fixed it by using postcss in our webpack.config:

    {
        test: /\.css$/,
        use: [          
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          { 
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                    "postcss-css-variables",
                ],
              }
            }
          }
        ]
      }

Cool, closing this issue as resolved.