Solved

How to fix tooltip styles?


  • Known Participant
  • 10 replies

Hello!

When I use the ‘InsightView’, to where I pass the respective variable from the ‘md/full.js’ file in order to render the chart - it works.

But when I hover on the chart - the tooltip looks ugly, as if there aren’t styles. In the dashboard page, where I made the chart, it looks correctly, and it looks incorrectly in the React application, in which I wanna implement it.

I imported to the root .js file styles by the next way:
 

import "./index.scss";
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import "@gooddata/sdk-ui-ext/styles/css/main.css";
import "@gooddata/sdk-ui-filters/styles/css/main.css";
import "@gooddata/sdk-ui-geo/styles/css/main.css";
import "@gooddata/sdk-ui-kit/styles/css/main.css";
import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import "@gooddata/sdk-ui-dashboard/styles/css/main.css";

ReactDOM.render(
<AppProviders>
<App />
<ToastContainer />
</AppProviders>,
document.getElementById("root"),
);

But it doesn’t help to show tooltip correctly.

I also tried to do imports by using ‘import’ method and via ‘then’ output the content in dependence of the moment, when they are uploaded - I assumed the possibility, that they weren’t uploaded at the moment of React component rendering and thought to wait until they are uploaded - but that also didn’t work for me.

How can I resolve the issue?

Thanks

icon

Best answer by Jan Rehanek 27 June 2022, 12:22

View original

10 replies

Userlevel 3

Hello,

Could you share bit more details with us, please? What kind of chart are you working with?
Would it be possible to add some screenshots from your Dashboard and from your App for comparison?

Thank you.

Thanks for the quick answer!

I made some charts in the GoodData dashboard and have the issue with everyone of them.

Here are screenshots: one is for from the GoodData dashboard, where tooltip is good, and second one is from the app, where it looks without styles.

Userlevel 3

Thank you very much for provided attachments, appreciated. We will try to replicate the issue on our end.

In the meanwhile, would it be possible to share with us also the code from actual implementation of the InsightView component, please?

Userlevel 3

Hello,

The tooltips are contained in the following div:

<div class="highcharts-tooltip-container"
style="position: absolute; top: 185px; pointer-events: none; z-index: 3; left: 416px;" dir="ltr">

Looking inside, the elements that contain the styling which should be relevant are:

            <div class="hc-tooltip gd-viz-tooltip" style="">
<!-- classes "stroke gd-viz-tooltip-stroke" relevant for the little coloured line -->
<span class="stroke gd-viz-tooltip-stroke" style="border-top-color: rgb(20,178,226);"></span>
<!-- classes "content gd-viz-tooltip-content" relevant for the height of the element -->
<div class="content gd-viz-tooltip-content" style="max-width: 320px;">

This should namely be the classes "content gd-viz-tooltip-content". I did a quick test where I directly modified the height of this element and it looks similar to the results you’re getting (the loss of formatting on the text you’re experiencing excluded).


Now, this is a bit odd. Is it possible your custom application is employing some sort of CSS that might be accidentally overwriting the default styling of the tooltips? Without seeing your app in detail, that’s the best guess I can make in regards to what’s causing the problem.

Yes

The container is on the top level, as if via ‘createPortal’. I saw it.
And broken styles are not only in the block height. 

Thank you for the help.

Let me check one more time the local styles if they break the default ones.

And my first assumption was - incorrect settings of the library. I just made imports as I mentioned above. It was also settled to generate the ‘md/full.js’ file. 

Is there anything, where I should look to check if settings were correct, except possible breaking it by some local styles?
Thanks

Thanks a lot @Jan Rehanek !😍
It was really in local styles - somebody created the global class ‘.content{}’ and assigned there styles, which broke the inbuilt style of the tag

<div class="content gd-viz-tooltip-content" style="max-width: 320px;">
               ...
            </div>

Userlevel 3

No problem 🙂 Have you been able to find the source of the issue? I can’t think of a specific scenario where the default styling would break without local styles interfering.

@Jan Rehanek 

Yes, the reason as in the local global class with name - ‘content’. And it broke the inbuilt same name class styles)

Thanks a lot again!

Userlevel 3

No problem.

I’ll follow this up internally - having a class with a generic name like ‘content’ as part of our SDK could cause a problem like this to more people 🤔

Userlevel 3

Hello,

One last update on this: Based upon this community thread, the ‘content’ class and several others will be renamed from version 8.10 of the SDK. These generic names will be replaced with prefixed names specific to GoodData.

It should make the probability of them being accidentally overwritten a lot smaller.

Reply