Comments (7)
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'`
from tippyjs-react.
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',
}
}
from tippyjs-react.
Closed. I found the tippy structure in here and here, I think I know how it works.
BTW, How can I remove all default imported CSS styles?
from tippyjs-react.
This was a tradeoff so you don't need to think about CSS.
This is very reasonable.
Maybe we should offer an import point without the CSS, like ``import Tippy from '@tippy.js/react/without-css'`
Maybe we can provide another option to control the enable/disable auto injection of theme?
from tippyjs-react.
Maybe we can provide another option to control the enable/disable auto injection of theme?
The issue is import tippy from 'tippy.js'
auto-injects CSS into head, but import tippy from 'tippy.js/esm
won't
Maybe this hackish solution could work: node monkey-patch.js
that runs before dev/build
:
const fs = require('fs')
const path = 'node_modules/@tippy.js/react/esm/index.js'
fs.writeFileSync(
path,
fs
.readFileSync(path, 'utf8')
.replace(
"import tippy from 'tippy.js'",
"import tippy from 'tippy.js/esm'"
)
)
I've also done similar monkey-patching on node_modules before
from tippyjs-react.
Could you import the non-css version by default and inject the css yourself, but also provide a prop to disable the injection part?
from tippyjs-react.
The injection is global so not sure how that would work. I think the ideal is to provide a different import path w/o the CSS. It shouldn't be too hard to make a PR for if you want?
from tippyjs-react.
Related Issues (20)
- Zoom of page and wrong positioning HOT 3
- Not able to set different placement for different targets of the same singleton HOT 1
- [FEATURE] Add Tippy as tooltip library
- Tooltip position not updated on first time mousehover , until mouse does not move
- Custom `content` type for Headless Tippy Singleton
- Property `aria-expanded` stays false on strict mode
- Nested tippies and double tippies
- Headless Singleton calls render ahead of time
- When I put large text, the box doesn't fill all HOT 1
- Typescript 4.9.4 error @popperjs/core: This type parameter might need an `extends Obj` constraint.
- Inertia React HOT 1
- Error in Nextjs 13
- Plugins error (even though not loading any plugins) HOT 8
- Cannot render tooltip for svg elements
- Error in production, Tippy js not working after next js build HOT 3
- Issue with dynamic theme
- Error while updated nodejs version
- HTML only shown as regular text
- ESC key should hide tooltip for accessibility
- TippyJS not Updating getReferenceClientRect on Window Resize or Scroll
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tippyjs-react.