d3.append("text") works fine but .append("div").append("text") doesn't

Question

using some d3 js to make a tooltip. Here's the code that works: `

      var textToolTip = nodeEnter

        .append("text")
        .attr("class", "textToolTip")
        .attr("visibility", "hidden")
        .attr("y", function(d) {
          if (d.parent != null) {
            d.x_pos = d.x;
            d.parent_x_pos = d.parent.x;
          }
          if (d.parent_x_pos != null) {
            return (d.x_pos + d.parent_x_pos) / 2 - d.x_pos;
          }
        })
        .attr("x", -90)
        .append("div")
        .text(function(d) {
          console.log(d.data);
          return d.data.extra_info;
        });
`

Then, in some other element, I did on mouseover return textTooltip.visibility to visible blah blah. The thing is, now when I hover, the texts show up, but if I did var textToolTip = nodeEnter .append("div").append("text")..... nothing shows up when I mouseover, the console shows the same text element, but just with a div without any attributes wrapped aroudn it.

I am appending a div before a text because I wanted a give my text a container so it breaks line when overflows, if it is possible to do that with just a text SVG element, please tell me how :) I have tried probably 10 combinations of the same thing but just swapping attr and appending order around, appending div then appending text doesn't work for me, even .append(div).text(...) didn't work