引導工具提示不起作用
[英]bootstrap tooltip is not working
問題描述
我在我的應用程序中使用引導程序。 我正在嘗試使用data-html="true"將目錄顯示為工具提示。 但它不工作。
這是我的代碼：
<div title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
data-html="true" rel="tooltip" style="cursor:pointer;"
class="infobox infobox-red infobox-dark " onclick="OpenDetails(this)">
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data"><span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
$(function () {
$("[rel='tooltip']").tooltip();
});
function OpenDetails(Obj){
}
提前感謝大家的回復。
2 個解決方案
解決方案1
3 已采納 2013-10-28 08:20:21
使用
data-original-title
網址：
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript：
$("[rel=tooltip]").tooltip({html:true});
如果您要使用所有引導功能，只需使用以下文件：
-bootstrap.css
-bootstrap.js
解決方案2
0 2021-04-05 14:31:03
使用
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
在 body 標簽的末尾（在 jQuery 和 Bootstrap 之后）
也可使用
title="Column1 | Column2 <br> Value1 | Value2"
代替
title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
最終版本可能是這樣的：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div
title="Column1 | Column2 <br> Value1 | Value2"
data-html="true"
rel="tooltip"
style="cursor: pointer"
class="infobox infobox-red infobox-dark"
onclick="OpenDetails(this)"
>
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data">
<span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
-->
</body>
</html>
Bootstrap 工具提示不適用於 .replaceWith()
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.