Bootstrap Popover not centered

Question

I hope you can help me out with a little problem. Right now I am working a little Listing-App project with Django. I have created my main HTML File for it and have a small table, where Django loads a list of movies inside, those movies have a Title that is a link and if you hover over this link a popover (from bootstrap 4) shows up with a small preview image from the movie. Now the problem is that the Popover is not always 100% centered. Most of the time the popover looks like this:

But then again, sometimes (like 2 out of 7 movies) it looks like this:

The weird thing is that this mostly happens when you hover for the first time over the link AND it doesn't occur all the time, sometimes it also occurs after you hovered like 2-3 times over it. I looked for a lot of solutions, but can't find any help. My Code is below:

{% extends "consilium/base.html" %}

{% block body %}
<table class="table">
<thead>
    <tr>
        <th></th>
        <th colspan="2">My Movielist</th>
        <th>
    </tr>
    <tr>
        <th></th>
        <th>TITLE</th>
        <th>GENRE</th>
        <th>RELEASE DATE</th>
        <th>DIRECTOR</th>
        <th>RUNTIME</th>
        <th>STATUS</th>
        <th>IMDB</th>
    <tr>
</thead>
</tbody>
{% if latest_movie_list %}
    {% for movie in latest_movie_list %}
    <tr>
        <td></td>
        <td>
            <a href="#" data-toggle="popover" data-placement="bottom" data-content='<img class="title-image" src="{{movie.image.url}}"/>'>{{ movie.title }}</a>
        </td>
        <td>{{ movie.get_genre_display}}</td>
        <td>{{ movie.date}}</td>
        <td>{{ movie.director}}</td>
        <td>{{ movie.runtime}} min</td>
        <td>{{ movie.get_status_display}}</td>
        <td>{{ movie.imdb}}</td>
    </tr>
    {% endfor %}
{% else %}
    <tr>
        <td>No Movies are available.</td>
    </tr>
{% endif %}
</tbody>
 </table>
{% endblock %}

Javascript:

 $(function () {
   $('[data-toggle="popover"]').popover({
html: true,
trigger: "hover",
container: 'body',
   })
 })

Also the class "title-image" in the data-content img tag has a width of 100%.

I hope someone can come up with a solution for this. It's not a tragic bug, but it would be nice to know how to fix it :)

Thanks to everyone who tries to help me!