В Bootstrap 4 я использовал следующий пример кода, чтобы обновить заголовок всплывающей подсказки (где 'statusIcon' - это элемент, в данном случае - отличный значок шрифта, но тот же принцип применим для кнопки или чего-либо еще:

$(statusIcon).attr('data-original-title', 'Check Error logs for details').tooltip();

Элемент HTML страницы Razor:

<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>

Читая руководство для Bootstrap 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.

0
OJB1 23 Янв 2021 в 20:47

2 ответа

Лучший ответ

Вы можете обновить заголовок всплывающей подсказки, изменив атрибут 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>
0
0stone0 23 Янв 2021 в 18:22

Поскольку для 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)

0
J. Titus 23 Янв 2021 в 18:41
65862446