Multiple mouseover events with d3.tip

My solution:

Do the extra mouseover work in d3.tip().html like so ...

let tip = d3.tip().html(function(d) {
    // some extra 'mouseover' code ...
    // some html generating code ...
    return 'some_html_code'
});

Then do the mouseout work in the main D3 code like so ...

svg.append('g')
    .selectAll("rect")
    .data(function(d) { return d }).enter()
        .append("rect")
        .on('mouseover', tip.show)
        .on('mouseout', function(d, i) {
            tip.hide();
            // some extra 'mouseout' code ...
        });

This works in the latest version of d3.tip, because the tip.show function requires access to this, but the tip.hide function doesn't actually use any of its arguments.

I ended up needing to pass the data object in to the tip.show() function.

The final code:

map.on("mouseover", function(d){ 
  tip.show(d); 
 })
 .on("mouseout", function(d){
  tip.hide(d);          
});

I haven't tried it, but this may also work:

map.on("mouseover", tip.show).on("mouseout", tip.hide);

If you are looking for a solution with D3 v6 (I'm using 6.4.0)

I had to pass event also

This was what worked for me

.on("mouseover", function(e,d) { tip.show(e,d); })

Link to d3.tip-for-d3.v6: https://github.com/bumbeishvili/d3.tip-for-d3.v6