Tooltip shown when tried in codesandbox but never shown when run in local react app

[Mahesha999]

I am trying to integrate this sunburst visualization in my react typescript app.

If you open above codesandbox link, it renders correctly along with mouseover tooltip:

However, when I copy pasted same code in my react-typescript app running on my local machine, it works perfectly except the tooltip. The tooltip is never shown.

Since the component related code is same in both codesandbox and my local machine, I feel that its something else that is present in my local machine but not in codesandbox which is hiding tooltip. I debugged mouseover event (which shows tooltip) in both environments and found initial call stack in both environments are same, but after sunburst component related call stacks / functions are executed, application on local machine executes different set of functions, that are not the application specific logic, but some framework logic. But I am not able to figure it out if these are indeed the culprit and if yes, what exactly it is.

Since I am not able to guess what else might be culprit, I have shared below the details of debugging sessions in the hope that it will reveal something. Let me know if I should be looking at something else.

Debugging on codesandbox

---

I tried to debug mouseover (on visualization) event in codesandbox and had a careful look at the call stack (gif) :

Here is the same image on youtube, which you can pause and have a look at call stack to find different files through which execution proceeds.

Below are various screenshots of callstack at successive points while debugging:

Debugging in application on local machine

---

Then I debugged the same mouseover event in my application running on local machine and had a careful look at call stack (gif):

Here is the same image on youtube, which you can pause and have a look at call stack to find different files through which execution proceeds.

Below are various screenshots of callstack at successive points while debugging:

PS:

I tried both:

.sunburst-viz .tooltip {
    z-index: 1000 !important;
    position: absolute
}

and

.sunburst-viz .tooltip {
    z-index: 1000 !important;
    position: relative
}

Also, when I hover any slice of sunburst chart, the tooltip DOM changes from:

to:

Notice the appearance of the three dots between <div>...</div> and expanding triangular arrow at the left of <div> when any slice is hovered. This means that tooltip might indeed getting populated momentarily, but somehow its getting cleared.

PS: I dont know if this is the right question to ask through issue as the actual problem might not be with the sunburst component itself. But any hint for even debugging it in different way is also appreciated.

[vasturiano]

@Mahesha999 if you observe the tooltip DOM element being updated correctly in your local instance, then my guess would be that there's something higher up in your app DOM component tree that's causing the tooltip elems no to be rendered, like some cascading css or so. But it's pure speculation, difficult to say. It does not appear directly related to SunburstChart however.

[Mahesha999]

Hi, after no success with everything, I just tried to replicate the versions from the codesandbox. I changed (before):

"d3": "^7.6.1",
"react-kapsule": "^2.2.4",
"sunburst-chart": "^1.16.2",

to (after):

"d3": "^7.3.0",
"react-kapsule": "^2.2.2",
"sunburst-chart": "1.15.2",

and it started working!

I dont know why, but I have diffed the CSS styles (copied from dev tools by right clicking tooltip div elements > Copy > Styles) before and after. This is my tooltip html:

<div class="sunburst-tooltip" style="left: 483.75px; top: 34.2031px; transform: translate(-96.75%, 21px); display: none;">
    <div class="tooltip-title">
         Link Layer → Error Detection → Error Detection Part--2
    </div>
    10 mins, 38 secs
</div>

For outer div, find the diff here (on left is after, on right is before). For inner div, find the diff here (on left is after, on right is before). Though, I dont know if it is useful, as other part of the my application's framework might had conflicts with earlier versions. I also tried the same versions in sandbox and it seems they are still showing the tooltip.

This is how it used to show when inspected in dev tools:

[Mahesha999]

I faced this issue again when I was trying to integrate this app. Somehow, opacity was getting set to 0. Silly reason, but still something to check for, if in case someone runs out of idea because of mental fog due to hours of debugging or if you are inexperienced in CSS ... like me 😐...