vue.js – How to add a tooltip to a d3.js path?


I am building a floormap from geojson data using d3.js topo and d3.js path. For clarification, I am also using vue.js. I want to add a tooltip when the user hovers over a room (aka the d3.js path). First I added just a console log to when the user hovers over a path but that did not work. I noticed that every time I load the app it does a console log but not when a user clicks / hovers over the d3.js path. I heard someone say that I would have to create an invisible circle or rectangle which would have the tooltip property bind to it but I don’t think that route would work once the floor maps get complex. I dont care about adding any actual data to the tooltip right now but later I would want to. Can someone point me in the right direction, please? Thank you.

Here is my floormap code

loadFloormap(){
        d3.json("../static/test-data-v2.json").then(function(data){

            let self = this

            var svg = d3.select("svg")
            var width = +svg.attr("width")
            var height = +svg.attr("height")

            svg.attr("transform", "translate(" + width/2 + ",0)")

            var projection = d3.geoIdentity().fitSize((width,height),data)
            var path = d3.geoPath(projection) 

            //console.log(data.features.properties.name)

            svg.selectAll("path")
              .data(data.features)
              .enter()
              .append("path")
              .attr("d",path)
              .attr("fill", "grey")
              .attr("fill-opacity", .2)
              .attr("stroke", "black")
              .attr("stroke-width", 1.5) 
              .on("mouseover", console.log("hello"))
      })
    },