引导工具提示不起作用
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){
}
提前感谢大家的回复。
使用
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
使用
<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>
相关文章:
- 引导程序3.3.4工具提示不起作用
- 引导工具提示在实时站点上不起作用,但在控制台上运行良好
- FancyBox和自定义工具提示一起使用不起作用
- Jquery工具提示不起作用
- Wordpress和JS工具提示不起作用
- 导轨引导工具提示样式不起作用
- Twitter 引导工具提示不起作用
- 为什么 qtip2 工具提示中的点击事件不起作用
- 以悬停工具提示样式的子导航为中心不起作用
- 工具提示在提交按钮上不起作用
- 工具提示不起作用谷歌饼图
- $(..).工具提示不起作用,因为 jQuery 1.9.2 由于旧的 jQuery UI 1.8.16 库而不起作用?
- d3.js 工具提示定位不起作用
- 引导工具提示不起作用
- 工具提示器悬停选择和选项在IE中不起作用
- 简单的工具提示插件 - 点击选项不起作用 - jQuery
- 引导程序 2.3.2 工具提示在 Rails + HAML 中不起作用
- 隐藏的“选择”元素上的工具提示不起作用
- 基础工具提示不起作用.关于这个主题的任何想法
- UIB 工具提示自定义触发器不起作用