JSFiddle - React, Tailwind, and code Playground

HTML

<p>confidences were unsought-frequently I have <span data-tooltip="to pretend to feel">feigned</span> sleep, <span data-tooltip="thing that deserves attention">preoccupation</span>, or a hostile <span data-tooltip="a lack of serious behavior">levity</span></p>

CSS

body {
  font-size:22px;
}
[data-tooltip] {
  position:relative;
  display:inline-block;
  margin-top:20px;
  border-top:1px solid red;
}
[data-tooltip]:before {
  content:attr(data-tooltip);
  font-size:12px;
  position:absolute;
  display:inline-block;
  white-space:nowrap;
  /* left:0; */
  margin-top:-20px;
}
[data-tooltip]:after {
  content:"";
  display:block;
  width:6px;
  height:6px;
  border-top:1px solid red;
  border-right:1px solid red;
  transform:rotate(-45deg);
  position:absolute;
  left:50%;
  margin-left:-3px;
  top:-4px;
  background:#fff;
}
[data-tooltip].left:before {
  left: 0 !important;
}
[data-tooltip].right:before {
  right: 0 !important;  
}
[data-tooltip].center:before {
  left: 50% !important;
  transform:translateX(-50%);
}

JavaScript

$(window).on('load resize', function() {
	pw = $('p').first().width();
  $('[data-tooltip]').each(function() {
  	pos = $(this).offset().left;
    if (pos < pw/3) {
    console.log('run');
    	$(this).removeClass().addClass('left');
    } else if (pos > pw*2/3) {
    	$(this).removeClass().addClass('right');
    } else if ((pos > pw/3) && (pos < pw*2/3)) {
    	$(this).removeClass().addClass('center');
    }
  })
})