Tooltip is not showing

[mbasakCinedigmInd]

Tooltip is not showing

Using you current version of sunburst chart and i do not know why the tooltip on hover chart is not showing. i used the following code. please let me know how can i fix this...

let chart = Sunburst();
chart
.data(data)
.width(740)
.height(740)
.color((d) => d.color)
.showTooltip(() => true)
.tooltipContent((d) => Notes: <i>${d.name} </i>)
.excludeRoot(true)(document.getElementById("chart-sunburst"+chartFor));

i am using the sample data and added color to it

[abhijitakulkarni]

Hi, were you able to resolve this, i am facing the same issue ? @vasturiano do you have any idea what i am missing, this is my code :

const sbdata = {
      name: 'main',
      color: 'magenta',
      children: [
        {
          name: 'a',
          size: 1,
          value: 20,
        },
        {
          name: 'b',
          children: [
            {
              name: 'ba',
              size: 1,
              value: 89
            },
            {
              name: 'bb',
              children: [
                {
                  name: 'bba',
                  size: 1,
                  value: 77
                },
                {
                  name: 'bbb',
                  size: 1,
                  value: 55
                }
              ]
            }
          ]
        }
      ]
    };

    Sunburst()
      .data(sbdata)
      .size('size')
      .height(150)
      .showLabels(true)
      .showTooltip(()=> true)
      .tooltipTitle(()=>'my title')
      .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
      .color(d => color(d.name))(this.sbChartEl.nativeElement);

[mbasakCinedigmInd]

No i couldnt resolve this, tooltip is coming but somehow getting hidden.... or getting beneath the graph itself. not sure how to solve it

[abhijitakulkarni]

hmm, i could see the div element in the dom for toopltip, but does not shows up

[vasturiano]

Do you observe the same issue in the built-in example? https://vasturiano.github.io/sunburst-chart/example/flare/

If not, could you make a simple reproducible example on https://codesandbox.io/ so that we can have a closer look?

[abhijitakulkarni]

Ok so i figured out the problem, when i tried replicating the issue in sandbox, i did not come across the issue. the problem in my case was the .tooltip class coming from bootstrap overriding the properties coming from the library (same class names) and it had opacity: 0 property because of which the tooltip class was hidden. I had to set the property in my global styles, to override it :

 .tooltip {
    opacity: 1 !important;
 }

Thanks for the idea @vasturiano