Search code examples
javascripthtmlcssd3.jstooltip

D3Tip inconsistency in tip placement

I've been working with D3 and D3tip for a few weeks now, and recently I've discovered an inconsistency in the display of tips (a question concerning the same topic has been posted and went unanswered before, link).

My example: I've built a responsive stacked barchart using D3Tip, and the tips display just fine: example

However if I move to the right, some tips start to display oddly. They suddenly move further to the left than the offset ([-height/35, 0]) that I've declared: example

I'm unable to reproduce this consistently, the only similarity I can find is that it only happens on the right side of the graph (similar to the previously asked question linked above).

I've checked my CSS and I can't find anything that's restricting the tips from being displayed there (I've tried changing the overflow property, the position and the margins even, the right margin seems to solve this for the first time I hover on the rightest most bar, entering from the right. I find this result very hard to interpret). Could it be that something within the library is causing this to happen? I'm far too inexperienced to start changing things in there, but I'm curious to see if someone knows a workaround that will allow me to keep the current design.

Thanks for taking a look!

For reference: The code for the D3tip in my JS is as follows:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-height/35, 0])
  .html(function(d) {
    return /*TEXT*/;
  });

with the event calling it being:

.style("opacity", 1)
.on('mouseover', function(d){
            d.color = color(d.name);
            d3.select(this).style("opacity", 1);
            tip.show(d);
          } )
          .on('mouseout', function(d) {
            d3.select(this).style("opacity", 0.6)
            tip.hide(d);
          } );

and the CSS of the tip and 'pointer':

.d3-tip {
  line-height: 1;
  font-weight: normal;
  font-size: .8em;
  padding: 12px;
  background: #FFFFFF;
  color: #000000;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  overflow: visible;
  position: relative;
}

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

The CSS of the div containing my chart:

#chart {
  display: inline-block;
  border: 1px solid #DDD;
  font-size: .8em;
  font-weight: lighter;
  float: left;
  position: relative;
  width: 98%;
  height: 50%;
  margin-top: 1%;
  margin-left: 1%;
  margin-right: 15%;
  overflow-y: visible;
}

Update: This has been tested on Safari and the bug doesn't occur there.

Solution

  • This proved to be a troublesome thing to fix. The workaround I've used now is removing the d3tip: after portion of the CSS. Now the tip no longer 'points' to the bar that's being hovered over, making this bug irrelevant. I realise this is not the best option, but it's no longer worth the time investing into why this occurs.