Comments (6)
OK, so I reproduced locally on sample project. Going to fix it.
from tolgee-js.
Hi!
Thanks for submitting. It's strange since we use exactelly the same stack and tooltips work fine.
Can you please provide a stacktrace of the error? Minimum example project would be also great.
from tolgee-js.
I was here writing the repro, glad to hear you managed to reproduce it! Let me know if you need any help.
from tolgee-js.
It seems like this happens, because Material UI is removing the title
attribute from the child while it renders the tooltip. I am looking into it, but if you need quick workaround, you can add aria-label attribute to the child element, so in-context localization stays working and use noWrap in the tooltips title attribute.
import './App.css';
import {Tooltip} from "@material-ui/core";
import {useTranslate} from "@tolgee/react";
function App() {
const t = useTranslate()
return (
<div className="App">
<header className="App-header">
<Tooltip title={t({key: 'topbar.account', noWrap: true})}>
<div aria-label={t({key: 'topbar.account'})}>Hello</div>
</Tooltip>
</header>
</div>
);
}
export default App;
from tolgee-js.
I didn't notice that Material UI was removing the title
attribute, anyway I'm gonna use the workaround for the time being (it works well). Thanks!
from tolgee-js.
It's fixed in the PR, but I still recommend to use the workaround. Wit noWrap it will be wrapped, so the position tooltip will be counted with longer text and it's not going to be positioned well.
from tolgee-js.
Related Issues (20)
- Utility Functions Translation does not work after Migrating to @tolgee/react from react-i18next HOT 3
- Defining `defaultVariables` value in Tolgee config HOT 4
- Screenshots taken may not work HOT 11
- Vue warning - ns prop type check failed
- Pulling translations by specific datetime HOT 2
- Invisible chars added to string loaded with `t` function HOT 2
- i18next integration fails to fetch some translations due to how resources are loaded on update
- Some localized strings are not shown properly on production, but they look just fine locally HOT 14
- Only 20 languages/a single page are fetched
- Update Angular example app to Angular 17 HOT 1
- Cannot Edit strong in popup window
- JS SDK in-context updates local data with empty value
- Dev tools error handling HOT 1
- Angular 17 SSR - Vite bundler throws error because document is not available on Server. HOT 2
- Fork format js
- Make next.js setup more user friendly
- Make `defaultNamespace` and `ns` better working together
- Type error for tag interpolation when using useTranslate hook HOT 1
- Slot Content Does Not Update on Language Change with Vue Router HOT 6
- Add an option to prevent BackendFetch from sending X-Tolgee-Sdk-Type and X-Tolgee-SDK-Version HOT 1
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 tolgee-js.