How to keep position of these tagHovers close to t

https://plnkr.co/edit/PuP3f71kCjkqgjjMkgNS?p=preview | Also have a stackoverflow snippet below.

Without scrolling the tagHovers will display correctly:

The problem

I think the problem is because I have a fixed position set on the tagHovers tags-modal class. However I need the fixed position on that div so the tagHovers can break outside of the constraints of the .tags-container.

Is there another way to achieve this effect without having to restyle the tagHovers so they have to fit inside the tiny width size of the tags-column?

Correct position without scrolling

Once you scroll, position of the fixed tagHover breaks

However once I started scrolling, the tagHovers lose their relative position to the tag you hovered.

.tags-container which has an overflow-y: auto; To display scrolling.

Each tag has an associated tag-hover directive.

The tagHovers have this styling (So they can be displayed outside of the constraints of the tags-column.)

CSS

https://gist.github.com/leongaban/eb2988a1ff01ada78ea0f663fd0432a8

TagHover.html

<section class="tags-modal" ng-show="tghov.tag.hoverDisplay" ng-mouseleave="tghov.leave()">
    <h1>Hover for: {{ tghov.tag.term }}</h1>
</section>

var app = angular.module('plunker', ['ui.bootstrap'])
.component('tagHover', {
//      templateUrl: 'tags_modal.html',
  template: `<section class="tags-modal" ng-show="tghov.tag.hoverDisplay" ng-mouseleave="tghov.leave()">
  <h1>Hover for: {{ tghov.tag.term }}</h1>
</section>`,
  controllerAs: 'tghov',
  bindings : {
      tag: '<'
  }
})
.controller('TagsHoverController', function(){});

app.controller('MainCtrl', function($scope) {
});

app.component('myComponent', {
  bindings: {},
//  templateUrl: 'tags.html',
  template: `<section class="tags-view">
  <div class="tags-column">
    <h1>Tags</h1>
    <div class="tags-container">
      <ul>
        <li ng-repeat="tag in tgs.tags">
          
          <div class="tag-container-container" ng-mouseleave="tgs.leaveTag(tag)">
            <div class="tag-container">
              <div class="tag" ng-mouseover="tgs.tagHover(tag)">{{ tag.term }}</div>
              <tag-hover tag="tag"></tag-hover>
            </div>
          </div>
          
        </li>
      </ul>
    </div>
  </div>
  <div class="tags-content">
    <div class="tags-box">
      <h2>Tags Content</h2> 
    </div>
  </div>
</section>`,
  controllerAs: 'tgs',
  controller: TagsCtrl
});


TagsCtrl.$inject = [
    '$scope',
    '$uibModal'];

function TagsCtrl(
    $scope,
    $uibModal) {
    ///////////////////////////////////
    
    this.hello = "hello world";
    
    this.leaveTag = (tag) => tag.hoverDisplay = false;
    
    this.tagHover = (tag) => tag.hoverDisplay = true;
    
    this.tags = [
      { id:0, term: 'apple'},
      { id:1, term: 'butter'},
      { id:2, term: 'charlie'},
      { id:3, term: 'duff'},
      { id:4, term: 'edward'},
      { id:5, term: 'freddy'},
      { id:6, term: 'george'},
      { id:7, term: 'henry'},
      { id:8, term: 'ink'},
      { id:9, term: 'joker'},
      { id:10, term: 'kevin'},
      { id:11, term: 'leon'},
      { id:12, term: 'mary'},
      { id:13, term: 'nancy'},
      { id:14, term: 'olivia'},
      { id:15, term: 'preston'},
      { id:16, term: 'quincy'},
      { id:17, term: 'robyn'},
      { id:18, term: 'steven'},
      { id:19, term: 'teddy'},
      { id:17, term: 'ulysses'},
      { id:18, term: 'victor'},
      { id:19, term: 'winston'},
      { id:20, term: 'xavier'},
      { id:20, term: 'yvette'},
      { id:21, term: 'zander'}
    ];
}

/* Put your css in here */

body {
  font-family: Arial, sans-serif;
}

.tags-hover-container {
    float: left;
    position: fixed;
    z-index: 101;
    left: 240px;
    margin-top: 40px;
    width: 200px;
    height: auto;
}

.tags-column {
  z-index: 1;
  float: left;
  position: relative;
  overflow-y: auto;
  margin-top: 70px;
  max-width: 230px;
  min-width: 230px;
  height: calc(100% - 165px);
}

.tags-column li {
  list-style: none;
}

.tags-container {
  overflow-y: auto;
  height: 320px;
}

.tag-container-container { float: left; position: relative; width: 100%; }

.tag-container { float: left; position: relative; }

.tags-content {
  float: left;
  background: #f0f0f0;
}

.tags-box {
  float: left;
  padding: 20px;
  width: 320px;
  height: 640px;
  background: #4169E1;
}

.tags-box h2 {
  color: #fff;
}

.tag {
  margin: 0 10px 10px 0;
  padding: 9px 10px;
  width: auto;
  color: #fff;
  background: #3D3D3D;
  border-radius: 4px;
  cursor: pointer;
  clear: both;
}

.tag:hover {
  background: #656565;
}

.tags-modal {
  float: left;
  position: fixed;
  z-index: 101;
  left: 100px;
  margin-top: -20px;
  padding: 10px;
  width: 200px;
  height: auto;
  color: white;
  background: blue;
  border-radius: 4px;
}

.tags-modal:before {
    position: absolute;
    top: -8px;
    left: 26px;
    z-index: 99;
    content: '';
    display: block;
    height: 0; width: 0;
    border-bottom: 8px solid blue;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
    <script src="https://code.angularjs.org/1.5.4/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <my-component></my-component>
  </body>
</html>

Finally! Yeah there is no CSS solution to this, I had to figure out the current mouse y position and use ng-style to updated the styling on the fly.

TickersPanelComponent

this.hoverTicker = (event, ticker) => {
    MousePosition.set(event);
    const mouseY = MousePosition.current.y;
    ticker.pos = { top: `${mouseY}px` };
    ticker.hoverDisplay = true;
};

TickersPanel markup (contains tagHover component with ticker passed in)

<div class="tag-container" ng-mouseleave="tikp.leaveTicker(ticker)">
    <div class="ticker"
         ng-mouseenter="tikp.hoverTicker($event, ticker)"
         ng-click="tikp.selectTicker('portfolio', ticker);">
         <span ng-if="ticker.long && !ticker.hoverDisplay">
            {{ ticker.short }}
         </span>
         <span ng-if="!ticker.long || ticker.hoverDisplay">
            {{ ticker.ticker }}
         </span>
    </div>
    <ticker-hover ticker="ticker"></ticker-hover>
</div>

MousePosition Factory

const set = (e) => {
    current.x = e.pageX;
    current.y = e.pageY;
}

Finally tagHover markup

<div class="ticker-hover-container"
    ng-style="tkhov.ticker.pos" ng-show="tkhov.ticker.hoverDisplay">

^ tkhov is the controllerAs this