Popover position in div with position absolute

Question

I have a problem with popover position.

This is what it looks like:

This is what it is supposed to look like:

With position: relative; on the timetable, the popover works, but the timetable doesn't:

Code:

In my html file I have one div with position: relative;

    <div id="bg-timetable" class="bg-timetable"/>

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

   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);
    }

Can You help me?

Answer 1

Ok I fix it:

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

        var div = document.createElement("div");
        div.id = event.id;
        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.setAttribute('data-placement',"top");
        a.appendChild(div);
        a.style.top =  start.getPercent() + "%";
        a.style.height = (end.getPercent() - start.getPercent()) + "%";
        a.classList.add("event");

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

Css:

a.event {
    position: absolute;
    width: 95%;
    background-color: lightblue;
}