我使用MDBootstrap和vanilla JS，并包含JQuery。
我已經包含了Popper.js，但在這之前我在控制臺中沒有得到任何錯誤，不知道這是否使事情變得更糟，但它在之前或之后都沒有作業。
我的CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="styleheet" />
<link href="https://fonts. googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="styleheet" />
<link href="https://cdnjs. cloudflare.com/ajax/libs/mdb-ui-kit/3.9.0/mdb.min.css" rel="styleheet" />
< link rel="styleheet" href="https: //cdn. datatables.net/1.10.20/css/jquery.dataTables.min.css">。
<link rel="styleheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk 5zjwyJaoRUgCdOrfSDhmMID2u4 OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous"/span> />
我的JavaScript
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"/span>></script
<腳本 src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"/span>
integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy D176RYoop1Da f9mvkYrmj5MCLZWEtQuA=="/span>
crossorigin="anonymous"/span>></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.10.1/umd/popper.min.js"/span>
crossorigin="anonymous"></script>
<script type="text/javascript"/span>
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.9.0/mdb.min.js"></script>
<script src="https://cdn. datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>>
我的HTML
<i data-mdb-toggle="tooltip"/span> id="warningIcon"/span>
title="警告"/span>
class="fa-exclamation-circle text-warning fa-lg"/span>>
</i>。
我的JavaScript
const warningIcon = document. getElementById(' warningIcon')
const tooltip = new mdb.Tooltip( warningIcon, {
title: '生成的警告資訊'。
});
tooltip.show()
我在這里做錯了什么？控制臺中沒有任何資訊，也沒有出現工具提示。
uj5u.com熱心網友回復：
你不需要popper.js。目前你的title屬性缺少一個結尾"，但我想把它全部洗掉，因為你在JS中使用title。只要確保HTML的結構正確，它就能正常作業。
<i data-mdb-toggle="tooltip"/span>
id="warningIcon"/span>
class="fa-exclamation-circle text-warning fa-lg"/span>>
</i>
const warningIcon = document.getElementById('warningIcon'/span>)
const tooltip = new mdb.Tooltip( warningIcon, {
title: '生成的警告資訊'。
});
tooltip.show()
https://codeply.com/p/r4ZtEfjCMd
uj5u.com熱心網友回復：
所以我最終想明白了。懷疑是資料庫或其他元素，我在JSFiddle中盡可能地復制了我的代碼，但無法使其失敗。
作為最后的手段，我嘗試用不同的選項來初始化工具提示，在使用{ placement: 'auto' }之后，它終于顯示出來了（盡管它有點破壞我的fiddle）。
const tooltip = new mdb.Tooltip（ warningIcon, {
title: '生成警告資訊'。
placement: 'auto'.
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/309224.html
標籤：