Bootstrap 5 使用 Javascript 更新工具提示标题

Question

在 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 列表视图中的元素。

Answer 1

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>

Answer 2

以下是如果您的工具提示处于循环状态并且您想要更新单击的按钮工具提示的示例。

使用案例：

使用复制表行中的按钮clipboard.js

代码：

索引.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>

索引.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');
    
});

Answer 3

由于 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 页面元素）