Popover position in div with position absolute
<p>I have a problem with popover position.</p>

<p><strong>This is what it looks like:</strong></p>

<p><img src="https://i.stack.imgur.com/DrcbS.png" alt=""></p>

<p><strong>This is what it is supposed to look like:</strong></p>

<p><img src="https://ai.imgur.com/WS54UID.png" alt=""></p>

<p><strong>With <code>position: relative;</code> on the timetable, the popover works, but the timetable doesn't:</strong></p>

<p><img src="https://i.stack.imgur.com/6Z46d.png" alt=""></p>

<p><strong>Code:</strong></p>

<p>In my html file I have one div with position: relative;</p>

<pre><code>    &lt;div id="bg-timetable" class="bg-timetable"/&gt;
</code></pre>

<p>In my <code>JS</code>, I create in it a small div with timetable with that has <code>position: absolute;</code>. For event I have a function:</p>

<pre><code>   function createDivEvent(event) {
        var start = new Time(event.startTime);
        var end = new Time(event.endTime);

        var div = document.createElement("div");
        div.classList.add("event");

        div.id = event.id;
        div.style.top =  start.getPercent() + "%";
        div.style.height = (end.getPercent() - start.getPercent()) + "%";
        div.innerHTML = event.subject.name + " (" + event.place.name + ")";

        var a = document.createElement('a');
        a.setAttribute('tabindex', "0");
        a.setAttribute('data-toggle','popover');
        a.setAttribute('data-content','Some content inside the popover');
        a.setAttribute('title',div.innerHTML);

        a.appendChild(div);

        var d = new Date(event.date)
        document.getElementById(weekday[d.getDay()]).appendChild(a);
    }
</code></pre>

<p>Can You help me?</p>