![](/img/trans.png)
[英]Bootstrap 3 - How to change the hyperlink title text showing as tooltip using javascript/jquery?
[英]Bootstrap 5 update Tooltip Title with Javascript
在 Bootstrap 4 中,我使用以下示例代码来更新工具提示的标题(其中 'statusIcon' 是元素,在这种情况下是一个很棒的字体图标,但相同的原则将适用于按钮或其他任何东西:
$(statusIcon).attr('data-original-title', 'Check Error logs for details').tooltip();
Razor 页 html 元件:
<i class="fas fa-circle fa-lg" id="statusIcon:@item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>
阅读 Bootrap 5 的手册,他们似乎没有告诉我们如何使用 Vanilla JS 来实现这一点
到目前为止我在 Javascript 中尝试过的内容:
var statusIconId = 'statusIcon:' + pluginId + '';
var statusIcon = document.getElementById(statusIconId);
document.getElementById(statusIconId).setAttribute("data-bs-original-title", 'Check Error logs for details');
我在元素 ID 中使用变量,因为我正在使用 Razor 列表视图中的元素。
您可以通过更改data-bs-original-title
属性来更新工具提示标题
$(function () { // Init $('[data-toggle="tooltip"]').tooltip() // Update jquery // $('#tt').attr('data-bs-original-title', 'New Tooltip Title'); // Update js document.getElementById('tt').setAttribute('data-bs-original-title', 'New Tooltip Title'); })
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" id='tt' class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip title"> Tooltip </button>
如果您的工具提示处于循环中,并且您想要更新单击的按钮工具提示,这是一个示例。
使用clipboard.js
复制表格行中的按钮
index.blade.php
<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to clipboard" class="btn-clip btn btn-primary" data-clipboard-text="{{ user.domain }}">Copy</button>
index.js
let clipboard = new ClipboardJS('.btn-clip');
clipboard.on('success', function (e) {
let trigger_button = e.trigger;
// update the tooltip title, get the tooltip instance, and show it
trigger_button.setAttribute('data-bs-original-title', 'Copied!');
let btn_tooltip = bootstrap.Tooltip.getInstance(trigger_button);
btn_tooltip.show();
// reset the tooltip title
trigger_button.setAttribute('data-bs-original-title', 'Copy to clipboard');
});
由于 Bootstrap 5.0 不再需要 jQuery,使用document.querySelector()
,然后在修改元素后重新初始化工具提示:
// initialize const tooltipElement = document.querySelector('[data-bs-toggle="tooltip"]') let bsTooltip = new bootstrap.Tooltip(tooltipElement) // update tooltipElement.title = 'New Title' bsTooltip = new bootstrap.Tooltip(tooltipElement)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> <i class="fas fa-circle fa-lg" id="statusIcon:@item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>
(更新为使用您的 Razor 页面元素)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.