我正在嘗試并未能在引導彈出視窗上設定文本：
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"
});
});
});
任何想法我哪里出錯了？提前致謝。
uj5u.com熱心網友回復：
$('#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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/348596.html
標籤：javascript html 查询 bootstrap-5
上一篇：匯入jquery的$并匯出