Bootstrap 5 Popover 动态文本

Question

我正在尝试在引导弹出框上设置文本但失败：

HTML

<span class="d-inline-block" id="searchPredict" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" title="Search" data-bs-placement="bottom" data-bs-content="initial text">
    <input type="text" id="searchBar" class="form-control mr-sm-2" placeholder="Product search" aria-label="Product search" aria-describedby="basic-addon2" id="floatingInput2" name="searched">
</span>

JS

$(document).ready(function(){
    $("#searchBar").click(function(){
        $("#searchPredict").popover({
            title: "testing123"
        });
    });
});

任何想法我哪里出错了？提前致谢。

Answer 1

在弹出功能后添加$('#searchPredict').attr('data-bs-original-title', "testing123");。

$(document).ready(function(){
    $("#searchBar").click(function(){
        $("#searchPredict").popover();
        //Bootstrap below 5
        // $('#searchPredict').attr('data-original-title', "testing123");
        //Bootstrap 5+
        $('#searchPredict').attr('data-bs-original-title', "testing123");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<span class="d-inline-block" id="searchPredict" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="bottom" data-bs-content="initial text">
    <input type="text" id="searchBar" class="form-control mr-sm-2" placeholder="Product search" aria-label="Product search" aria-describedby="basic-addon2"  name="searched">
</span>