i have one problem that bootstrap5 popover cannot make by jquery , always show error

Uncaught TypeError: POPOVER: Option "content" provided type "undefined" but expected type "(null|string|element|function)".

i have 7 elements in my html file as follow

<div >
    <div  style="text-align: center; margin: auto;" data-bs-toggle="popover">
        @if($tlr->paid_status == 0)
        <img src="{{asset('assets/user/user.png')}}" alt="**" style="width:100%;">
        @else
        <img src="{{asset('assets/user/paid_user.png')}}" alt="**" style="width:100%;">
        @endif
        {{$tlr->username}}
        <div  data-name="popover-content">
            <div  style="text-align: center;">
                <div >
                    <a href="{{url('tree/'. $tlr->username)}}">
                        <h4>{{$tlr->username}}</h4>
                    </a>
                </div>
                <div >
                    <?php
                        echo "<h5>".strtoupper("$tlr->first_name $tlr->last_name")." </h5> $paid";
                        printBV($tlr->id);
                        printBelowMember($tlr->id);
                    ?>
                </div>
            </div>
        </div>
    </div>
</div>

i set data-bs-toggle="popover" in user class to use bootstrap5 popover . i have 7 similar elements in same html page , so i use for each loop for class as

$(document).ready(function() {
    $('.user').each(function() {
        var $this = $(this);
        var options = {
            trigger: 'click , hover',
            placement: 'bottom',
            html: true,
            // content: $(".userInfo").html(),
            content: $this.find('.userInfo').html()
        }

        var popover = new bootstrap.Popover($this, options)
    });
});

but it make error as

Uncaught TypeError: POPOVER: Option "content" provided type "undefined"

and cannot popover all elemnts, some element get popover but some elements cannot get popover ,

why this happen , i need to do seperate name of class ?

how can solve.

CodePudding user response：

There's nothing wrong with your code. Just make sure you include bootstrap links. Try this

document.addEventListener('DOMContentLoaded', () => {
    Array.from(document.querySelectorAll('.user[data-bs-toggle="popover"]')).forEach(element => {
        const userInfo = element.querySelector('.userInfo');
        if (userInfo) {
            new bootstrap.Popover(element, {
                trigger: 'click , hover',
                placement: 'bottom',
                html: true,
                content: userInfo.innerHTML
            });
        }
    });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div >
    <div  style="text-align: center; margin: auto;" data-bs-toggle="popover">
        <img src="https://i.imgur.com/9pNffkj.png" alt="**" style="width:100px;">
        John Doe
        <div  data-name="popover-content">
            <div  style="text-align: center;">
                <div >
                    <a href="">
                        <h4>John Doe</h4>
                    </a>
                </div>
                <div >
                    <div>Ad nostrud veniam veniam fugiat sunt</div>
                    <h6>do consequat</h6>
                    <p>culpa irure commodo.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div >
    <div  style="text-align: center; margin: auto;" data-bs-toggle="popover">
        <img src="https://i.imgur.com/9pNffkj.png" alt="**" style="width:100px;">
        Jane Doe
        <div  data-name="popover-content">
            <div  style="text-align: center;">
                <div >
                    <a href="">
                        <h4>Jane Doe</h4>
                    </a>
                </div>
                <div >
                    <div>Ad nostrud veniam veniam fugiat sunt</div>
                    <h6>do consequat</h6>
                    <p>culpa irure commodo.</p>
                </div>
            </div>
        </div>
    </div>
</div>