JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollableTooltip">
  <!-- Let's assume this is a tooltio and -->
  <p>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar </p>
</div>

<div id="triggerDiv">
  <!-- When I hover and scroll here, I want to scroll my tooltip -->
  Scroll inside me to trigger scroll in div above...
</div>

CSS

#scrollableTooltip {
  border: 1px solid red;
  height: 100px;
  overflow-y: scroll;
  margin-bottom: 30px;
}

#triggerDiv {
  border: 1px solid red;
  height: 200px;
}

JavaScript

$('#triggerDiv')
	.on('mousewheel DOMMouseScroll', function (e){
  
		console.log("Scroll was triggered...", e);
    
    // How do I trigger a scroll event for #scrollableTolltip?
    
    // 1. 
    $('#scrollableTooltip').scroll();
    
    // 2. 
    // $('#scrollableTooltip').trigger('scroll');
  });