JSFiddle - React, Tailwind, and code Playground

HTML

<textarea name="text" id="textdata" rows="7" cols="79" wrap="soft" maxlength="4000" onselect="populateList(this.value)" > </textarea>

<p id="tooltip">

</p>

JavaScript

var openFile = function (event) {
  var input = event.target;
  var reader = new FileReader();
  reader.onload = function () {
    var text = reader.result;
    var red = text.split('\n').reduce((acc,e)=>{
      console.log(acc,e);
      acc.push(Array.prototype.concat.call([],e.split(' ')))
      return acc
    },[]);
    var node = document.getElementById('output');
    node.innerText = text;
  };
  reader.readAsText(input.files[0]);
};
function populateList(val)
{
  // alert("Entered populateList ");
  let textComponent = document.getElementById('textdata');
  let tooltip = document.getElementById('tooltip');
  let selectedText;
  let startPos = textComponent.selectionStart;
  let endPos = textComponent.selectionEnd;
  selectedText = textComponent.value.substring(startPos, endPos);
  console.log(selectedText);

  fetch('https://api.myjson.com/bins/z9wr6').then(data=>data.json()).then(data=>{
    let text = data.result.split('\n').reduce((acc,e)=>{
      acc.push(Array.prototype.concat.call([],e.split(' ')))
      return acc
    },[]);
    text.forEach(e=>{
      if(e.find(ele=>ele===selectedText)){
        tooltip.innerHTML = e.join(', ')
      } 
    })

  })
}