How do I modify the tooltip position?

[Nerian]

Hi,

I am using tooltips but the tooltip appear just where the mouse is. I want the tooltip to appear 20px at the top of the mouse position. How can I achieve this?

Is there a way to add an offset of 20px to the tooltip?

I see in tooltip.js that there are gravity, distance, snapDistance that seems to be related to what I want to accomplish. How do I access and modify them to suit a particular chart's tooltips?

nv.addGraph(function() {
        var chart = nv.models.pieChart()
            .x(function(d) { return d.label })
            .y(function(d) { return d.value })
            .showLegend(false)
            .showLabels(true);

          chart.tooltipContent(function(key, y, e, graph) {
            return '<p>' + key + ': ' + y + '</p>'
          });

          d3.select(place)
              .datum(data)
            .transition().duration(1200)
              .call(chart);

        return chart;
      });

Thanks!

[Thomas-S-B]

Hi,

you could change the nv.d3.css for example. You can add e.g. a 'margin: -20px' like to .nvtooltip: .nvtooltip { position: absolute; background-color: rgba(255,255,255,1.0); padding: 1px; margin: -20px; ...

[Nerian]

Hi,

I tried doing that but it didn't change the position.

Head over to: http://nvd3.org/livecode/#codemirrorNav and put this code in the markup/html tab:

<style>

#chart svg {
  height: 400px;
}

.nvtooltip {
    margin-right: -200px;
  }

</style>

<div id="chart">
  <svg></svg>
</div>

When you mouseover the pie you will see that the tooltip is still in the same place. The position didn't change.

[Thomas-S-B]

Please try this: .nvtooltip { margin-top: -50px; }

[Nerian]

Oh I that did work :) Thanks.

Nevertheless, that would change all tooltips. I would like to change just the one for the pie chart. Is there any way to add a class to a chart's tooltip?

[davidrapin]

This worked for me:

• shift the tooltip 100px to the left: .nvtooltip { margin-left:-100px; }
• shift the tooltip 100px to the right: .nvtooltip { margin-right:-100px; }

[liquidpele]

Looks to be answered.