Add a Tooltip to a Div

.tooltips {
    position: relative;
    display: inline;
}

.tooltips .tooltiptext {
    display: inline-flex;
    align-items: center;
    padding: 0 .25rem;
    visibility: hidden;
    background-color: #FFFFFF;
    color: #7A7A7A;
    border-radius: 3px;    
    font-size: 13px;
    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.5);
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: -3px;
    right: 15px;
    background-color: #f1f1f1;
}
.tooltipicon { display:inline; cursor: help }
.tooltipicon:hover { background-color: red; }
.tooltipicon:hover + .tooltiptext {
    visibility: visible;
}

<div class="tooltips">
    Geeignete Anzahl monatl. Besuche <div class="tooltipicon">♠</div>
    <div class="tooltiptext">Tooltip text</div>
</div>

Angular: add a tooltip to a div in runtime

First, you create a directive as below,

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[hintText]',
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @Input()
  set hintText(value: string[]) {
    this.el.nativeElement.title = value;
  }
}

then use the directive in your DOM element

<div [hintText]="hintText1">Place mouse pointer on me!</div>

<div [hintText]="hintText2">Place mouse pointer on me!</div>

dynamically change your hint text from the component,

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {     
  hintText1: string;
  hintText2: string;

  ngOnInit(): void {
    this.hintText1 = 'my text title 1';
    this.hintText2 = 'my text title 2';
  }
}

JavaScript - tooltip div on hover

Bootstrap does all this and more: http://getbootstrap.com/javascript/#tooltips

To put it in:

$('#example').tooltip(options)

And the markup being:

<div class="tooltip">
  <div class="tooltip-inner">
    Tooltip text here!
   </div>
  <div class="tooltip-arrow"></div>
</div>

Go to the link for a more detailed explanation on how to implement it

How to use a single Vanilla JS tooltip div to display 100+ different tooltips?

After much more trial and error fixed it like so:

///////////////////////////////////////////////////
  // SHOW tooltips
  ///////////////////////////////////////////////////
  let tooltipContainer = document.getElementById('tooltipContainer');
  const tooltipBox = document.getElementById('tooltipBox');
  document.addEventListener('mousemove', function checkHover(e) {
    tooltipContainer.style.left = getWidth() > e.pageX + 400 ? e.pageX + 2 + 'px' : e.pageX - 402 + 'px';
    tooltipContainer.style.top = e.pageY + 2 + 'px';
    const allTooltips = document.getElementsByClassName('tooltip');
    for (var i = 0; i < allTooltips.length; i++) {
      if (allTooltips.item(i).querySelector(':hover')) {
        tooltipBox.innerHTML = allTooltips.item(i).lastChild.innerHTML; tooltipBox.style.display = "block"; return;
      }
    }
    tooltipBox.innerHTML = ""; tooltipBox.style.display = "none";
  });

Basically every time the mouse moves there is a single MouseMove event that checks the mouse position, adjusts the position of the DIV, and finally runs through all elements with tooltip to check if any is hovered.

How to make tooltip appear beneath a div instead of covering it?

Just add a top value of the height of the hovered container (60px in your case) to your absolutely positioned tooltip element.

Also by the way, </br> is invalid markup. It should either be a standalone <br> or a self-closing <br/> in X(HT)ML.

.Timeline {  display: flex;  align-items: center;  height: 500px;  margin-left: 80px;}
.event1 {  position: relative;}
.event1Bubble {  position: absolute;  background-color: rgba(158, 158, 158, 0.1);  width: 130px;  height: 60px;  top: -70px;  left: -15px;  border-radius: 5px;  box-shadow: inset 0 0 5px rgba(158, 158, 158, 0.64)}
.event1Bubble:after,.event1Bubble:before {  content: "";  position: absolute;  width: 0;  height: 0;  border-style: solid;  border-color: transparent;  border-bottom: 0;}
.event1Bubble:before {  bottom: -10px;  left: 13px;  border-top-color: rgba(222, 222, 222, 0.66);  border-width: 12px;}
.event1Bubble:after {  bottom: -8px;  left: 13px;  border-top-color: #F6F6F6;  border-width: 12px;}
.eventTime {  display: flex;}
.DayDigit {  font-size: 27px;  font-family: "Arial Black", Gadget, sans-serif;  margin-left: 10px;  color: #4C4A4A;}
.Day {  font-size: 11px;  margin-left: 5px;  font-weight: bold;  margin-top: 10px;  font-family: Arial, Helvetica, sans-serif;  color: #4C4A4A;}
.MonthYear {  font-weight: 600;  line-height: 10px;  color: #9E9E9E;  font-size: 9px;}
.active {  font-family: "Arial Black", Gadget, sans-serif;  color: #228B22;  font-size: 11px;  text-transform: uppercase;  display: flex;  flex: 1;  align-items: center;  margin-left: 12px;  margin-top: -2px;}
.tooltip {  position: relative;  display: inline-block;}
.tooltip .tooltiptext {  visibility: hidden;  width: 480px;  background-color: black;  font-family: Arial, Helvetica, sans-serif;  color: #fff;  text-align: left;  padding: 5px 0;  padding-left: 5px;  border-radius: 6px;  position: absolute;  z-index: 1;  top: 60px;}
.tooltip:hover .tooltiptext {  visibility: visible;}

<div class="Timeline">  <div class="event1">    <div class="event1Bubble tooltip">      <span class="tooltiptext">id: 12345<br>                                    starts_on: 2019-03-07<br>                                    start_reason: something<br>                                    ends_on:<br>                                    end_reason:<br>                                    type: something          </span>      <div class="eventTime">        <div class="DayDigit">10</div>        <div class="Day">          Wednesday          <div class="MonthYear">September 2018</div>        </div>      </div>      <div class="active">Active</div>    </div>  </div></div>

word-wrap:break-word;