I quite like d3-tip (and note that I'm just a week into JavaScript and D3).

I'm finding that with orient("left"), the tip is centered at the point rather than hanging out to the left. This also happens when I use orient("right") when the box would run off the right boundary and so gets flipped to the left.

See this example.

changing the way you show or hide your tooltip from opacity (0 or 1) to display (block or none)

Looking at the source code, tip.hide() sets the opacity of the tip to 0.0, but does not actually hide it from the web page. This works fine for some cases. However, the tip while invisible still blocks the content below it, and one cannot mouseover an SVG element that lies behind the hidden tip, for example. Shouldn't a variant of 'display: none' be used instead?

I'm having a problem with the tip placement in Firefox (28 and 27 tested). You can see the problem if you hover over a polygon on the map here. The tip is down and to the right of the polygon. Hovering over the rects on the bar chart work fine. Chrome and IE work perfectly for the maps and chart, it's just Firefox that's the problem.

Take the furthest polygon on the map to the right. You can get where jQuery thinks it is on the page via console.log($(".geom[data-id='396']").position().top, $(".geom[data-id='396']").position().left);. Doing console.log(coords.top, coords.left); from within tip.show yields a much higher delta in Firefox.

Chrome/IE
jQuery top/left: 376/635
d3-tip top/left: 363/712

Firefox
jQuery top/left: 416.75/636.25
d3-tip top/left: 483/789

It looks like the culprit is getScreenCTM() in getScreenBox. It's producing a very different result in Firefox. 'e' and 'f' in Chrome are 98 and 119, and they are 288 and 226 in Firefox for that furthest poly. I have no idea what e and f mean, so I could be wrong there.

So...kinda smells like a Firefox bug. I just wanted to check here to make sure I'm not doing something egregiously stupid before I go tromping through bugzilla :).

Sometimes tips can exceed the bounds of the screen. For instance, if a circle element is at the 0,0 offset in the document and has a direction of w, the tooltip will be drawn off screen. We should check for this and flip the direction to e in this case.

In my IE9 testing, I found that if a tooltip covers up another element on the screen, when the tooltip is hidden, you can no longer click on that element or hover over it and get a tooltip.

Here is a JSFiddle. In IE9, hover over the bottom circle, then try to hover over the circle just above it. The tooltip won't show up.

I was able to fix it by patching the hide and show methods. When the styles are set, I set display:'inline' on show and display:'none' on hide. That fixes it. Not sure if that causes any other issues, however.

Hi, I have a project and am using d3-tip very happily on all browsers, but on iPad the y-position of the tooltip is behaving strangely. It's appearing way below where the rollover object exists. And the y coordinate seems to go at a logarithmic rate - meaning if I rollover a high element, the tip is about 100px below it. If I rollover a lower element on the page, the tip is MUCH lower.

You can see it here:
http://beehivemedia.com/dataviz/hospitalpricing/show.php?drg=280&orderby=max_charges%20DESC&command=default

Click one of the bars and the tooltips are on the circles in the scatter plot.

Thanks,
Bill

This isn't an issue in Chrome, but when you scroll left in Firefox the tooltip position doesn't update for me. I fixed it by editing the if statement on line 242 and then adding another if statement after:

Before:

if(document.documentElement && document.documentElement.scrollTop) {
   scrollTop = document.documentElement.scrollTop
   scrollLeft = document.documentElement.scrollLeft
 }

After:

if(document.documentElement && document.documentElement.scrollTop) {
   scrollTop = document.documentElement.scrollTop
}

if(document.documentElement && document.documentElement.scrollLeft) {
   scrollLeft = document.documentElement.scrollLeft
}

Caged,

on our webpage (http://dataminas.info/dados/divida-publica/) we are using a facebook comment-count tag (<fb:comments-count href=http://dataminas.info/ponto/2508/>/fb:comments-count) inside the d3.tip().html().

It looks like the facebook comment-count tag is calculated only when the page finishes loading.

Do you have any suggestion on how to make the tip.html() load this tag correctly?

When you hover over charts in linux chrome sometimes the hovers dont hide.

Here is a demonstration:
http://screencast-o-matic.com/watch/c2XhIae2rM

I'm using d3-tip with dc.js. I've encountered a bug with the tips when used on a chart that is animating.

When a chart animates during a chart.redraw(), it is possible for a tip to become "orphaned" and remain open for the life of the page.

To reproduce, set a chart.transitionDuration(750), then change a filter or cause a redraw(), and while the chart is animating, quickly mouseover one of the rows/bars/slices. If the tooltip is open when the animation completes, the tip will never close.

Here is an example:

    chart
      ...
      .transitionDuration(750)
      .renderlet(function (chart) {
        var chartTip = d3.tip()
          .attr('class', 'd3-tip')
          .direction('e')
          .offset([0, 0])
          .html(function (d) {
            switch (chart.reducer) {
              default:
              case 'Revenue':
                return '<div>'+d.data.key.split('.')[1]+'</div>'
                      +'<div class="money">'+currencyFormat(d.data.value)+'</div>' ;
              break ;
              case 'Volume':
                return '<div>'+d.data.key.split('.')[1]+'</div>'
                      +'<div class="money">'+d3.format(',d')(d.data.value)+'</div>' ;
              break ;
            }
          }) ;
        chart.selectAll('g.pie-slice path, text.pie-slice').call(chartTip) ;
        chart.selectAll('g.pie-slice path, text.pie-slice')
          .on('mouseover', chartTip.show)
          .on('mouseout', chartTip.hide) ;
      })

I'm following the basic setup instructions and also looking at this link to try to set up d3-tip with my line graph.

Just invoking it, I'm getting an error...seems like I should be able to call the library relatively easily.

var tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });

Gives me: Uncaught TypeError: Object #<Object> has no method 'tip'

Using d3 3.4.4

I don't see an easy way to have the tooltip follow the cursor. I might fork and add this at some point, any guidance on the proper way would be useful.

I have an SVG element being rendered at the bottom of a web page, which sometimes introduces vertical scrollbars where half of the element is visible before scrolling the page. When I mouse over a point on the SVG, the tooltip is being rendered well below the selected point. After tweaking the settings in getScrollBBox I am able to get better positioning, but it is still not perfect.

point.x = x + (scrollLeft / 2)
point.y = y + (scrollTop / 2)

Additional Information:

The direction is configured as n

I have a stacked bar chart. Each stack consists of two rectangles.
Now I've appended the tip to the groups instead of the rectangles. When I hover over the group the tooltip is not positioned on top of each group as expected. Instead it will be placed on top of each bar instead (see screenshot)

It is only placed correctly when hovering over the top of the two rectangles.

Even using the .offset callback did not solve the problem. I assume this behavior is caused due to the bbox?

I'm using a d3 circle packing chart and have applied the d3-tips to the various circles with the .on('mouseover', tip.show) command. It works very nicely!

But elsewhere on the page I have a list of the names of all the elements displayed in the chart, and when the user hovers over them, I'd like to trigger the d3-tips over their respective circles on the chart. To say it again with different words, I want to trigger the tooltips from elsewhere on the page, not just when mousing over shapes in the d3 chart.

I tried tricking the .on('mouseover', tip.show) attached to the individual shapes via jQuery's mouseover() command, as in: $('#circle03').mouseover(); but it doesn't work... and it also produces a Uncaught RangeError: Maximum call stack size exceeded error.

Each of my circles has a unique ID tag such as circle01, circle02, circle03. Do you have any tips? Could it be something simple like:
d3.tips.$('circle03').tip.show

Hate to bother you but the explicit-target example is not relevant to the question. I'm trying to trigger the tooltip from outside the d3 chart via jQuery or JavaScript. The explicit-target example demonstrates how to append the tip.show trigger onto d3 generated elements while d3 is building them, and then display the tip on a different element within the chart. I need to trigger the tip when mousing over a list of hyperlinks on a different part of the page (outside the d3 chart) that are generated with jQuery.

I can access the DOM element like this:

d3.select("[id=PhylomapNode15]").node()

and it returns this:

<circle id="PhylomapNode15" onmouseover="mouseOverNode(15)" onmouseout="mouseOutNode(15)" class="PhylomapChild" cx="145.36022983409694" cy="200" r="32.502108609236146" style="fill: rgb(0, 203, 0); stroke: rgb(128, 128, 128); stroke-width: 1px;"><title>8</title></circle>

I'd like to add a line to my mouseOverNode(id) function that triggers the tooltip. Something like:

d3.select("[id=PhylomapNode15]").node().tip.show

...would be nice, but that produces an error:

Uncaught TypeError: Cannot read property 'show' of undefined

Any suggestions would be most appreciated. I have been struggling with this for several days.

I think this may actually be a problem with DC-js, but I've discovered you need to use 'mouseleave' instead of 'mouseout' when working with a line chart, or the pointer axes are left on-screen.

Hi Justin

Great plugin. I am enjoying it with dc.js.

One small fix your might want to consider. On init, the d3-tip div gets added to the bottom of the page and with css property of padding 10px, it creates a div 20px wide. So for sites with different footer / sticky footer, it adds a white line 20px wide at the end after the footer. Once the tip.show event is triggered the div adjusts and the gap from bottom is gone.

The simple fix I did to overcome is in the js file, I added top position and updated

x.style({position:"absolute",opacity:0,pointerEvents:"none",boxSizing:"border-box"})

to

x.style({position:"absolute",opacity:0,pointerEvents:"none",boxSizing:"border-box",top:0})

Hope it helps someone. If you have another solution, I am all ears for that

Thanks,
Nikhil

Looks like we need to specify a position top, bottom, etc. before absolute positioning kicks in and removes the tip from the document flow.

/cc @jglovier

It would be great if we could set a fixed position for the tooltip.
I have a radial chart (using two arcs) and I'd like to show the tooltip in the center.

Unfortunately, I can't figure out how to set the offset using the arcs.

Or can this be done with the target feature?

Can you add an example for using tool tips to a multi-lines chart e.g. http://bl.ocks.org/mbostock/3884955
Thanks

i am using django framework for displaying graph

    {% extends "base.html" %}
    {% load staticfiles %}
       {% block content %}
     <head>
    <link href="{% static 'css/dc.css' %}"  rel="stylesheet" media="screen">
    </head>
    <body>
           <div class="container" style="margin-top: 140px">

           <div class="col-lg-4" id="test">

           </div>

            <div class="col-lg-4" id="test1">

            </div>

    <script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/crossfilter.js' %}"></script>
    <script type="text/javascript"  src="{% static 'js/dc.js' %}"></script>
    <script type="text/javascript"  src="{% static 'js/bootstrap.min.js' %}"></script>

    <script type="text/javascript">

     var chart = dc.pieChart("#test");
     var spenderRowChart = dc.rowChart("#test1");

     d3.csv("{% static 'sampledata/pramod.csv' %}", function(error, experiments) {

      experiments.forEach(function(x) {
       x.Name = x.Name;
        x.Party = x.Party;
        x.Gender = x.Gender;



      });

      var ndx  = crossfilter(experiments),

      GenderDimension = ndx.dimension(function(d) {return d.Gender;});
      spendPerName = GenderDimension.group();
      PartyDimension = ndx.dimension(function(d) {return d.Party;});
      PartyPerName= PartyDimension.group().reduceCount();


      // tooltips for row chart
      var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function (d) { return "<span style='color: #f0027f'>" +  d.key + "</span> : "  + numberFormat(d.value); });
      chart
        .width(200)
        .height(200)
        .dimension(GenderDimension)
        .group(spendPerName)
        .innerRadius(50);

      spenderRowChart
        .width(350).height(900)
        .dimension(PartyDimension)
        .group(PartyPerName)
        .label(function (d) { return d.key })
        .title(function (d) { return d.value })
        .ordering(function(d) { return -d.value })
        .elasticX(true);

      chart.render();
      spenderRowChart.render();

      d3.selectAll("#test1").call(tip);
            d3.selectAll("#test1").on('mouseover', tip.show)
                .on('mouseout', tip.hide);


    });

    </script>
            </body>
    {% endblock %}

I'm generating a dynamic number of charts in an Angular app and each has a tooltip. When I destroy the chart the tip is not getting removed from the DOM. Is there a way to properly destroy old tool tip instances?

Im trying to apply an elastic animation by using ease(),while it doesnt figure that out,is there any way to do that?

tip.direction should support for ne, nw, se and sw. We're already returning the coordinates for these directions in get_screen_bbox, it's just a matter of implementing them.

Guys,

I am a novice d3-js programmer. I implemented a page with some toy example data using it:

http://50.116.27.138/hackathon/

however, the mouseover function sometimes is not working, i.e., sometimes when you pass the mouse over a circle the cursor does not change to a link and neither the tooltip appears.

Any suggestions?

I found a slight difference in behavior between d3.tip.min.js and d3.tip.js.

In this example, using d3.tip.min.js, the tips for the two pink points at the right of the plot will flicker a bit. The same code, but using d3.tip.js doesn't have that issue.

Actually, I just realized that in the latter case (with d3.tip.js), the tips don't turn off when you move away from the point.

I guess the flicking with d3.tip.min.js is due to the tip box covering the point (since it's not aligned correctly), so the mouse is no longer over the point.

I'm using the bilevel example: http://bl.ocks.org/mbostock/5944371 for a chart and can easily get tips working for the "name" portion of the json data, but the data is lost on the zoomout functions.

How can I get the tips to work throughout this example and reset full zoomout?

Thanks.

Line 239 of index.js should use === to match equality of string as well as type.

Minimized version of the script (http://labratrevenge.com/d3-tip/javascripts/d3.tip.min.js) is corrupted/outdated. The tip can't handle scrolling. If the graph is wide and you scroll out from the initial area the tip wont follow.

The script is used in example: http://bl.ocks.org/Caged/6476579.

Not minimized (https://raw.github.com/Caged/d3-tip/master/index.js):

Minimized (http://labratrevenge.com/d3-tip/javascripts/d3.tip.min.js):

I'm adding d3-tip to a moving element. On mouseover the position is correct, but when the cursor is inside the element but the element is moving the tooltip stays at a fixed position. I'd like to see it move to stay at the correct position, until the mouseout/hide is triggered.

Currently the tool tips are shown and hidden using display:none / display:block. Because of this, CSS transitions can't be used such as fading the opacity in / out or applying CSS animations, etc.

Instead, CSS classes should be applied to show and hide the tooltips. For example, adding an 'active' class to show the tooltip.

PS - thanks for the great work. I was able to add tooltips w/ some really nice HTML in 5 mins!

Recent version of d3.js 3.5.5

Where a tip actually overlay elements, flicker occurs when hovering over portion of the tip overlaying the element. Presumably this is down to mouseover events being thrown on the tip itself and causing a mouseout on the element to which the tip is applied. I've had a look at issues 42 and 32 and the pointer-events:none solution doesn't resolve it.

I'm using chrome 32.01 but I'm seeing this issue in safari 7.01 and firefox 26 too. I'm using d3-tip v0.6.3 according to bower.

Here's an example (modified from previous ones): http://jsfiddle.net/6wGZB/1/

Is there a way to show the tooltip with a delay?

Hi,

My problem is that sometimes the tooltips won't hide. I use DC.js to build the graphs.

The tooltips won't hide, when you click in the graph, wait for at least ~0.5s and then leave it. I logged the mouseout in the console. And it raised the event properly.

I have a graph in a fixed-position overlay but the tip is absolutely positioned from the body element. So if I scroll, the tip looks like it detaches from the node it's decorating.

I need this functionality, so I will add it to a fork. I'm happy to do it properly and submit a PR if we can agree how best to support this. Here are the high level solutions I can think of.

1. Allow tip to be appended to a dev-specified dom element, and positioned from the closest non-static parent. I think this is the most flexible solution and can fix other positioning issues (ie if the graph moves in any way while a tip is visible). However, I think it's a more complex change and I'm not sure how to calculate the correct offset from the target (d3) node to the specified parent element.
2. Explicitly support "fixed" position graphs, either as an option or automatically detected. This is an easier code change for sure, as the tip element just needs position: fixed; and skip adding scrollTop and scrollLeft to its offset.

I programmatically change direction on my tip, and noticed that the direction classes was not reassigned to the .d3-tip div. When show had run on tips with direction n, e, s and w, the .d3-tip div had all these classes instead of one.

I locally changed line 34 from i = 0 to i = directions.length, otherwise the while-loop never runs. This solved my problem.

I don't know if this breaks some other stuff. Maybe it should be looked into?

Thanks for a nice library :-)

I've upgraded to the latest of d3-tip and Safari (8.0.6), and when mousing over RWD D3 visualizations in Safari, the tooltip is shifting, depending upon location. All is fine in Chrome and Firefox,though.

To be sure there wasn't some math being added, I tried it both with these settings:
.offset([-10,0])
.offset([0,0])

I've revised a large D3 visualization to use the new version of d3-tip and have found the performance to be sluggish. Compare the original version and the revised version: hover over points in the upper-right panel.

This will probably only be noticeable for visualizations with many elements, but do you have any suggestions? Is it just that my code is poorly constructed?

I've put the code on Gist: the original version and the revised version.

it would be nice to have a file different than index.js to more reflect the actual lib (d3-tip.js maybe?)

the reasoning behind this: every other lib does that and because of that it's easier to automate flattening the bower_components without really "cryptic" filename

First, thank you for creating D3-tip as it's saved a lot of hair pulling for a novice like me.

I integrated D3-tip into a treemap, and it works great except for small areas. Is there's workaround to this?

Thank you

http://bl.ocks.org/tyokota/7619385

I'm using this (AMAZING) plugin in a popup context.
Each time I open a popup, it creates a new d3 chart, and when closed, it destroys and cleans everything.

But it seems that a new tooltip get created/appended to the DOM each time, without the possibility to remove it.

Do I have to find the element myself and remove it from the DOM once I close my popup?

It would be really useful to have a little more 'power' over the DOM element of the tooltip.
Because it is not accessible via the API.

In FireFox on Mac (and I think also Linux), the text is not aligned with the tool tip box.

Here's an example:

If a tool tip covers a DOM element when shown, it will continue to cover that DOM element, even when hidden, until the tool tip is moved.

See these images:

Repro steps:

1. Create two DOM elements (A and B)
2. Create d3 tool tips for both DOM elements.
3. Arrange DOM element B such that the Tool tip for DOM element A, overlays ontop of DOM element B
4. Hover over DOM element A
5. Observe d3 tool tip is shown
6. Hover over DOM element B

Expect: Tool Tip is Shown
Observed: Tool tip is not shown

Because the Tool Tip element is still there, it's covering up the mouse over events for the underlying DOM element.

It would have saved me a couple of hours if there is some instructions about how to require this module in a CommonJS project. I almost switched to other tools because I was not able to load the module.

How we can set a duration to show the tip?
like this

.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d.date) + "
" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});

I have the following code which works:

var tip = d3.tip()
  .offset([50, 0])
  .html(config.tooltip.text)
  .attr('class', 'tooltip')

But I wanted to add more attributes, thus I placed

var tip = d3.tip()
  .offset([50, 0])
  .html(config.tooltip.text)
  .attr(config.tooltip.attr); //config.tooltip.attr is an object with class:'tooltip'

However, due to the current implementation, tip in the first code (which would be a function) isn't the same as the tip in the second (which would now be a selection array). d3-tip functions cannot be chained anymore, and vis.call(tip) will throw an error.

tip.attr = function(n, v) {
  if (arguments.length < 2) {
    //should there be no `return` on this part
    return d3.select(node).attr(n)
  } else {
    d3.select(node).attr(n, v)
  }
  return tip;
}

Am I missing something as to why this is implemented like this? Or is it meant to be implemented like this? I saw the same code for .style as well.

Is there a way to display the tooltip (not on mouseover)?

Something of the nature of:

svg.select(".point").tooltip.show

to cause the tooltip to be displayed above the selected element?