JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="myDiv" style="width: 100%;"></div>

CSS

.own_tooltip{
			border-radius: 7px;
			border: 1px solid black;
			padding: 10px; 
			/*width: 150px;*/
			display: table;
			left: 0px;
			top: 0px;
			background-color: #ffffff;
			display: none;
			
			z-index: 100;

			background-color:rgba(255,255,255,.8);
			-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF,endColorstr=#66FFFFFF);/*IE fix */
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF,endColorstr=#66FFFFFF);     /* IE Fix */
			
			pointer-events:none;
		}

		.tooltip_square{
			width:12px;
			height:12px;
			background:blue;/*manipulated by javascript*/
			border-style: solid;
			border-width: 1px;
			border-color: gray;
			margin-right: 3px;
		}

		.tooltip_value_col{
		   padding-left: 10px;
		 }

JavaScript

var showVerticalHoverLine = true;
	var chartDivId = "myDiv";
	var chartDiv = document.getElementById(chartDivId);

	 /**ToolTipHandler.js*/
		function ToolTipHandler(myDivId){
			var _this = this;
			
			//timer for count time until hide the tooltip
			_this.hideTimerId = undefined;
			
			//append tooltip html to dom and save the span and the table element as member
			_this.toolTipSpan = $('<span class="own_tooltip"></span>');
				
			_this.toolTipTable = $(
				'<table>' +
				'  <tbody>' +
				'<tr><td colspan="3"><strong>13.09.17</strong></td></tr>' +
				'	<tr class="tooltip_entry">' +
				'	  <td><div class="tooltip_square" style="background:green"></div></td>' +
				'	  <td>Temp</td>' +
				'	  <td class="tooltip_value_col"><strong>38.876</strong></td>' +
				'	</tr>' +
				'  </tbody>' +
				'</table>'
			);
			_this.toolTipTable.appendTo(_this.toolTipSpan);
			_this.toolTipSpan.appendTo('body');
		  _this.chartDivId = myDivId;
			
			//add event listener for coordinate mouse position
			function onMouseUpdate(e) {
				_this.xMouse = e.pageX;
				_this.yMouse = e.pageY;
			}
			document.addEventListener('mousemove', onMouseUpdate, false);
			document.addEventListener('mouseenter', onMouseUpdate, false);
		}
		
		/**
		 * fills the toolTipTable with the given data and shows it at the given xy position. If no xy-Position is provided it shows the tooltip near to the mouse-cursor
		 */
		ToolTipHandler.prototype.showTooltip = function(data, xPosition=null, yPosition=null){
			var _this = this;
			
			//clear timer for unhiding, because no unhiding is needed
			if(_this.hideTimerId!=null){
				window.clearTimeout(_this.hideTimerId);
				_this.hideTimerId = undefined;
			}
			
			//group measurements for date
			var xYData = {};//map: one date for more y values
			$.each(data.x, function(index, xValue){
				yArray = xYData[xValue];
				if(yArray==null){
					//there is not already an entry: create one
					yArray = [];
					xYData[xValue] =...