![](/img/trans.png)
[英]Bootstrap 4 tooltip use custom attribute other than title to provide the text for the tooltip
[英]Is it possible to load text file to bootstrap tooltip title?
我想将一个文本文件加载到我的引导工具提示标题中。
这是我使用简单值的代码的一部分:
<div>
<a id="A" type="button" class="btn btn-outline-secondary btn-lg" data-toggle="tooltip" dataplacement="bottom" href="Some action"> A</a>
<a id="B" type="button" class="btn btn-outline-secondary btn-lg" data-toggle="tooltip" dataplacement="bottom" href="Some action"> B</a>
<a id="C" type="button" class="btn btn-outline-secondary btn-lg" data-toggle="tooltip" dataplacement="bottom" href="Some action"> C</a>
</div>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
$('#A').tooltip({
title: "June"
});
$('#B').tooltip({
title: "July"
});
$('#C').tooltip({
title: "August"
});
</script>
我有一个文本文件:
June
July
August
该文本文件将使用一些脚本进行更新,我正在尝试“动态地”将这 3 个值放在我的 3 个工具提示标题上。
我用 XMLHttpRequest() 或 $.get() 尝试了一些东西,但我没有得到正确的结果。
例如我试过:
function(Atooltip(node) {
$.get("My text File", function(responseText) {
var Month = responseText;
});
console.log(Month);
return Month;
}
$('#A').tooltip({
title: Atooltip
});
控制台日志返回:
June
July
August
但我的工具提示标题是空的。
有更好的方法吗?
或者也许是一种循环执行文件树行的方法?
ajax 是异步的,使用您的代码在调用实际返回之前注入值,因此它是空的。 尝试
$.get("My text File", function (responseText) {
var Month = responseText;
console.log(Month);
}).done(function (Month) {
console.log(Month);
$('#A').tooltip({
title: Month
});
});
要拆分结果,给定您发布的文件结构(每行一个月),您可以:
$.get("My text File", function (responseText) {
let Months = responseText.split("\n");
// Months is now an array -> ["June", "July", "August"]
}).done(function (Month) {
console.log(Month);
$('#A').tooltip({
title: Month[0] // June
});
$('#B').tooltip({
title: Month[1] // July
});
// Keep going as much as you need ...
});
将来考虑检索 json 而不是纯文本,以便更容易分配多个值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.