What went wrong? Tooltip shows the word object instead of parsing

[Bug]: Incorrect title tooltip (Title: [Object Object]). about miruro HOT 1 OPEN

techroy23 commented on June 2, 2024

[Bug]: Incorrect title tooltip (Title: [Object Object]).

from miruro.

Comments (1)

techroy23 commented on June 2, 2024

May i suggest JSLibrary https://atomiks.github.io/tippyjs/

sample code (pyhon flask + html).
result is comming from the json response of consumet api.

<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js/dist/tippy.min.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/translucent.min.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animations/shift-away.min.css">

	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@popperjs/core/dist/umd/popper.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tippy.js/dist/tippy.umd.min.js"></script>
</head>



<div class="container">
    <h1 class="text-center my-4">Popular Anime</h1>
    <div class="row">
        {% for result in data.results %}
        <div class="col-md-2 mb-4">
            <div class="card" data-tippy-content="{{ result.title }}">
                <img src="{{ result.image }}" alt="{{ result.title }}" class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">{{ result.title[:15] }}{% if result.title|length > 15 %}...{% endif %}</h5>
                    <p class="card-text">Release Date: {{ result.releaseDate }}</p>
                    <a href="{{ result.url }}" class="btn btn-primary">More Info</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<script>
tippy('.card', {
    theme: 'translucent',
    animation: 'shift-away',
    followCursor: true,
    delay: 250
});
</script>