0

I have a tooltip that appears when the user mouses over an element. The problem is that when the tooltip mouses over a word on the far right part of the screen, it can no longer be seen.

I tried the answer by @EPurpl3 here, but couldn't figure out how to replace the span element with the reference to d.TooltipInfo.

I also tried to add a line to the effect of <body onResize="window.location=window.location;"> as described here - but it had no effect.

Here is the code:

var doc = URL.createObjectURL(new Blob([`TooltipInfo Category Function1 Function2 Retention
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum "General Furry, Program and Subject Files" Average Quantity and Planning Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Senate Committee on animal Standards Bowl and Plate Design Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Published Canine Bowl and Plate Design Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine case files Bowl and Plate Design Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine Files  Avoiding Neck Strain Jack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine Files  Drooling Jack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine Files  Drooling Jack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ADVERTISING At home Jack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum PROMOTIONS At home Jack 100
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Publications At homeio Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Public and Information Services At homeio Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special treats Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special treats Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special treats Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special pats Snack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special pats Snack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special pats Snack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum DEVELOPMENT Optimal time of day - walking Snack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum INCOME AND REVENUE Optimal time of day - walking Snack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Fundraising Optimal time of day - walking Snack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Fundraising Optimal time of day Snack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum DEVELOPMENT Optimal time of day Snack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum INCOME AND REVENUE Optimal time of day Snack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Protective Measures Snack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Protective Measures Pack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Observant of Limps Etc Pack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Observant of Limps Etc Pack 8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Observant of Limps Etc Pack 8
`]));

d3.tsv(doc)
  .row(function(d) {
    return {
      TooltipInfo: d.TooltipInfo,
      Category: d.Category,
      Function1: d.Function1,
      Function2: d.Function2
    };
  })
  .get(function(error, data) {


      //         var allGroup = d3.map(data, function(d){return(d.Function1)}).keys()
      // console.log(allGroup)

      // console.log(allGroup.length);
      var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0)

      var height = 150,
        width = 300;


      var nest = d3.nest()
        .key(function(d) {
          return d.Function2;
        })
        .key(function(d) {
          return d.Function1;
        })
        .key(function(d) {
          return d.Category;
        })
        .entries(data);


      var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0)



      var height = 80,
        width = 150;


      var divs = d3.select(".container")
        .selectAll(null)
        .data(nest)
        .enter()
        .append("div")
        .attr("class", "innerdiv");

      divs.append("p")
        .html(function(d) {
          return d.key;
        });


      var divs2 = divs.selectAll(null)
        .data(function(d) {
          return d.values;
        })
        .enter()
        .append('div')
        .attr("class", "first")


      divs2.append("text")
        .attr('class', 'label1')
        .attr('x', 0)
        .attr('y', 0)
        .style("font-size", "16px")
        .style("font-weight", "bold")
        .style("fill", "white")
        .attr("width", 400)
        .text(function(d) {
          return d.key;
        })
        .attr('text-anchor', 'start')

      var svgs2 = divs2.selectAll(null)
        .data(function(d) {
          return d.values;
        })
        .enter()
        .append('svg')
        .attr("class", "second")
        .attr("width", function(d) {
          return String(d.Category).length * 31
        })
        // .attr("width",200)
        .attr("height", 20);


      svgs2.append("text")
        .attr('class', 'label2')
        .attr('x', 10)
        .attr('y', 17)
        .style("font-size", "12px")
        .text(function(d) {
          return d.key;
        })
        .attr('text-anchor', 'start')

      var rect = svgs2.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .filter(function(d, i) {
          const x = d3.select(this.parentNode).datum();
          return x.key == d.Category ? 1 : 0;
        })
        .attr("height", "12")
        .attr("width", function(d, i) {
          return String(d.Category).length * 7.3
        })
        .attr("x", function(d, i) {
          return (i * 20) + 10;
        })
        .attr("y", 8)

        .attr("fill", "white")
        .style("opacity", "0")
        .style("cursor", "pointer")
        .on("mouseover", function(d, i) {
          div.transition()
            .duration(200)
            .style("opacity", .9);
          div.html(`${d.TooltipInfo}`)
            .style((function(d) {
              return d3.event.pageX > (window.innerWidth) ? "left" : "right"
            }), d3.event.pageX + "px")
            .style((function(d) {
              return d3.event.pageY > (window.innerHeight) ? "top" : "bottom"
            }), d3.event.pageY + "px")})
            .on("mouseout", function(d) {
              div.transition()
                .duration(500)
                .style("opacity", 0);
            });

        });
div.tooltip {
  position: absolute;
  text-align: left;
  width: 500px;
  height: auto;
  padding: 3px;
  font: 17px sans-serif;
  color: white;
  border: 0px;
  border-radius: 3px;
  pointer-events: none;
  background: black;
}

.tooltip {
  display: inline-block;
  text-indent: 0em;
}

h1 {
  font-size: 30px;
  font-family: "Consolas";
  float: left;
  margin: 0;
}

.container {
  display: flex;
  padding: 0px;
  flex: 1 1 1;
  flex-wrap: nowrap;
  float: left;
}

.innerdiv {
  text-align: left;
  font-size: 21px;
  font-family: "Consolas";
  flex: 1 1 1;
}

.innerdiv+.innerdiv {
  padding-left: 20px;
  border-left: 2px solid lightgray;
}

.legend {
  position: fixed;
  font-family: "Century Gothic";
}


/* div {width: auto; height: auto; } */

.first>*:first-child {
  width: 100%;
}

div.first {
  display: flex;
  padding: 0px;
  flex: 0 0 100%;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.min.js"></script>

<div class="container"></div>

Update: I can stop the tooltip from disappearing from the left or the right of the window with this:

.style("left", function() {return d3.event.pageX >(window.innerWidth*.75) ? d3.event.pageX - 520+"px": d3.event.pageX + "px"})

I'm now working on making sure that tooltip doesn't disappear out the top or the bottom of the window. I first figured out how to make the "bottom" style look right (requires subtracting mouse position from the total height - something about the way d3 draws a page from top to bottom):

.style("bottom", window.innerHeight - d3.event.pageY+20 +"px")

The problem now is that the tooltip disappears out of the top of the page. I thought I could set a conditional function that will select either "top" or "bottom" for the style attribute. But I don't think d3 allows a function to be set on the style - only on the value. To illustrate, the below line of code shows pretty much the same as the above line of code, but the addition of a function on the style messes up the tooltip position.

.style(function() {return "bottom"}, window.innerHeight - d3.event.pageY+20 +"px")

So: need to figure out some kind of function to call on the value, to stop the tooltip from going out the top of the page. The logic for this is not as straightforward as the horizontal positioning, because the width of the tooltip is fixed, but the height of the tooltip varies with the content. Unless a percentage might work?

oymonk
  • 427
  • 9
  • 27

1 Answers1

0

Figured it out - needed getBoundingClientRect() to get the height of the tooltip. Once I have the height, and the height of the window, I can write a function that checks if the mouse is at a position less than window.innerHeight - clientrect.height.

Code:

var rect = svgs2.selectAll("rect")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .filter(function(d, i) {
    const x = d3.select(this.parentNode).datum();
    return x.key == d.Category ? 1 : 0;
  })
  .attr("height", "12")
  .attr("width", function(d, i) {
    return String(d.Category).length * 7.3
  })
  .attr("x", function(d, i) {
    return (i * 20) + 10;
  })
  .attr("y", 8)
  .attr("fill", "white")
  .style("opacity", "0")
  .style("cursor", "pointer")
  .on("mouseover", function(d, i) {
    div.transition()
      .duration(200)
      .style("opacity", .9);
    div.html(`${d.TooltipInfo}`)
      .style("left", function() {
        return d3.event.pageX > (window.innerWidth * .75) ? d3.event.pageX - 520 + "px" : d3.event.pageX + "px"
      })
      .style("bottom", function() {
        var clientrect = d3.select(this).node().getBoundingClientRect();
        return d3.event.pageY > (window.innerHeight - clientrect.height) ? window.innerHeight - d3.event.pageY + "px" : window.innerHeight - d3.event.pageY - clientrect.height + "px"
      })
  })
  .on("mouseout", function(d) {
    div.transition()
      .duration(500)
      .style("opacity", 0);
  });
oymonk
  • 427
  • 9
  • 27
  • this solution still isn't great - if I scroll down the page, I have issues with the tooltip going off the page. – oymonk Jul 23 '19 at 13:50