Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

What is the best way to fully customize the theme?

See original GitHub issue

Currently I make it to transparent and use content’s styles

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

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

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

.tippy-popper[x-placement^='top'] .tippy-tooltip.tomato-theme .tippy-arrow {
  border-top-color: transparent;
}
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.tomato-theme .tippy-arrow {
  border-bottom-color: transparent;
}
.tippy-popper[x-placement^='left'] .tippy-tooltip.tomato-theme .tippy-arrow {
  border-left-color: transparent;
}
.tippy-popper[x-placement^='right'] .tippy-tooltip.tomato-theme .tippy-arrow {
  border-right-color: transparent;
}

.tippy-tooltip.tomato-theme .tippy-roundarrow {
  fill: transparent;
}

Issue Analytics

State:
Created 5 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

ignatevdevcommented, Jul 30, 2019

I have personally come up with a pretty clean hack based on the comments above.

I have added the following line in my webpack’s resolve.alias section and it stopped injecting the default style!

resolve: {
    alias: {
        'tippy.js': 'tippy.js/esm',
    }
}

1reaction

atomikscommented, Feb 14, 2019

BTW, How can I remove all default imported CSS styles?

This was a tradeoff so you don’t need to think about CSS: but basically, you can’t (easily). Maybe you could wait until DOMContentLoaded and then find the <style> node and remove it from the <head>.

Maybe we should offer an import point without the CSS, like ``import Tippy from ‘@tippy.js/react/without-css’`