Tôi có một chú giải công cụ về phần tử neo, sẽ gửi yêu cầu AJAX khi nhấp. Phần tử này có một tooltip (từ Twitter Bootstrap). Tôi muốn nội dung chú giải công cụ thay đổi khi yêu cầu AJAX trả về thành công. Làm thế nào tôi có thể thao tác với tooltip sau khi bắt đầu?

Chỉ cần tìm thấy điều này ngày hôm nay trong khi đọc mã nguồn. Vì vậy, $.tooltip(string)gọi bất kỳ chức năng trong Tooltiplớp. Và nếu bạn nhìn vào Tooltip.fixTitle, nó sẽ tìm nạp data-original-titlethuộc tính và thay thế giá trị tiêu đề bằng nó.

Vì vậy, chúng tôi chỉ đơn giản là làm:

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

và chắc chắn, nó cập nhật tiêu đề, đó là giá trị bên trong tooltip.

Một cách khác (xem bình luận @lukmdo bên dưới):

$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');

Trong Bootstrap 3, đủ để gọi elt.attr('data-original-title', "Foo")là các thay đổi trong "data-original-title"thuộc tính đã kích hoạt các thay đổi trong màn hình chú giải công cụ.

CẬP NHẬT: Bạn có thể thêm .tooltip ('hiển thị') để hiển thị các thay đổi ngay lập tức, bạn không cần phải di chuột và nhắm mục tiêu di chuột để xem thay đổi trong tiêu đề

elt.attr('data-original-title', "Foo").tooltip('show');

bạn có thể cập nhật văn bản chú giải công cụ mà không thực sự gọi show / ẩn:

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')

Đây là một giải pháp tốt nếu bạn muốn thay đổi văn bản mà không đóng và mở lại tooltip.

$(element).attr('title', newTitle)
          .tooltip('fixTitle')
          .data('bs.tooltip')
          .$tip.find('.tooltip-inner')
          .text(newTitle)

bằng cách này, văn bản được thay thế mà không đóng tooltip (không định vị lại, nhưng nếu bạn đang thực hiện thay đổi một từ, v.v. thì sẽ ổn thôi). và khi bạn di chuột xuống + trở lại trên tooltip, nó vẫn được cập nhật.

** đây là bootstrap 3, vì 2 bạn có thể phải thay đổi tên dữ liệu / lớp

cho Bootstrap 4:

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");

Điều này hoạt động nếu tooltip đã được khởi tạo (có thể bằng javascript):

$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');

Dành cho bootstrap 3.x

Đây có vẻ là giải pháp sạch nhất:

$(element)
  .attr('data-original-title', 'New title').tooltip('show')

Hiển thị được sử dụng để thực hiện cập nhật tiêu đề ngay lập tức và không chờ cho tooltip bị ẩn và hiển thị lại.

Đây là bản cập nhật cho Bootstrap 4 :

var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

Nhưng cách tốt nhất là làm như thế này:

var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

hoặc nội tuyến:

var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');

Từ phía UX bạn chỉ thấy văn bản được thay đổi mà không có hiệu ứng mờ dần hoặc ẩn / hiển thị và không có nhu cầu cho _fixTitle.

Bạn chỉ có thể thay đổi data-original-titlebằng cách sử dụng mã sau đây:

$(element).attr('data-original-title', newValue);

Bootstrap 4

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose

$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
  $('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);

#topic_1 {
  border: 1px solid red;
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div id="topic_1">Topic 1</div>

Phần sau đây hoạt động tốt nhất với tôi, về cơ bản tôi đang loại bỏ bất kỳ chú giải công cụ hiện có nào và không bận tâm đến việc hiển thị chú giải công cụ mới. Nếu cuộc gọi hiển thị trên chú giải công cụ như trong các câu trả lời khác, nó sẽ bật lên ngay cả khi con trỏ không lơ lửng phía trên nó.

Lý do tôi tìm giải pháp này là các giải pháp khác, sử dụng lại tooltip hiện có, dẫn đến một số vấn đề lạ với tooltip đôi khi không hiển thị khi di con trỏ lên trên phần tử.

function updateTooltip(element, tooltip) {
    if (element.data('tooltip') != null) {
        element.tooltip('hide');
        element.removeData('tooltip');
    }
    element.tooltip({
        title: tooltip
    });
}

Trong bootstrap 4 tôi chỉ sử dụng $(el).tooltip('dispose');sau đó tạo lại như bình thường. Vì vậy, bạn có thể đặt xử lý trước một hàm tạo ra một chú giải công cụ để đảm bảo rằng nó không tăng gấp đôi.

Phải kiểm tra trạng thái và tinker với các giá trị có vẻ ít thân thiện hơn.

Bạn có thể đặt nội dung trong cuộc gọi tooltip với một chức năng

        $("#myelement").tooltip({
            "title": function() {
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            }
        });

Bạn không phải chỉ sử dụng tiêu đề của phần tử được gọi.

Cảm ơn mã này rất hữu ích cho tôi, tôi thấy nó hiệu quả trong các dự án của tôi

$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');

Phá hủy bất kỳ chú giải công cụ có sẵn nào để chúng tôi có thể hồi sinh với nội dung chú giải công cụ mới

$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});

Tôi không thể có bất kỳ câu trả lời nào hoạt động, đây là một cách giải quyết:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);

Tôi nghĩ Mehmet Duran gần như đúng, nhưng có một số vấn đề khi sử dụng nhiều lớp với cùng một tooltip và vị trí của chúng. Đoạn mã sau cũng tránh lỗi kiểm tra js nếu có bất kỳ lớp nào được gọi là "tooltip_group". Hi vọng điêu nay co ich.

if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }

Thay đổi văn bản bằng cách thay đổi văn bản trong phần tử trực tiếp. (không cập nhật vị trí chú giải công cụ).

$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);

Thay đổi văn bản bằng cách hủy công cụ cũ, sau đó tạo và hiển thị một công cụ mới. (Làm cho cái cũ mờ dần và cái mới mờ dần)

$element
.tooltip('destroy')
.tooltip({
    // Repeat previous options.
    title: newText,
})
.tooltip('show');

Tôi đang sử dụng phương pháp hàng đầu để tạo hiệu ứng "Tiết kiệm". thông báo (sử dụng &nbspđể tooltip không thay đổi kích thước) và để thay đổi văn bản thành "Xong". (cộng với phần đệm) khi yêu cầu hoàn thành.

$element.tooltip({
  placement: 'left',
  title: 'Saving...',
  trigger: 'manual',
}).tooltip('show');

var parent = $element.parent();
var interval_id = setInterval(function(){
    var text = $('.tooltip-inner', parent).html();
    switch(text) {
    case 'Saving.  ': text = 'Saving.. '; break;
    case 'Saving.. ': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.  '; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.    ');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});

Điều này làm việc cho tôi: (bootstrap 3.3.6; jquery = 1.11.3)

<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>

<script>
  $('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>

Thuộc tính data-html="true"cho phép sử dụng html trên tiêu đề tooltip.

Với đối tượng Tooltip Boostrap:

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');

Đối với BS4 (và BS3 với những thay đổi nhỏ) .. sau nhiều giờ tìm kiếm và thử nghiệm, tôi đã đưa ra giải pháp đáng tin cậy nhất cho vấn đề này và nó thậm chí còn giải quyết vấn đề mở nhiều hơn một (tooltip hoặc popover) cùng một lúc, và vấn đề mở tự động sau khi mất tập trung, v.v.

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'hover'
}).on('shown.bs.tooltip', function() {
  var link = $(this);
  var data = '';
  data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
  data += '	<li>Sherif Salah</li>';
  data += '	<li>Muhammad Salah</li>';
  data += '	<li>and a gazillion more...</li>';
  data += '</ul>';
  link.attr('data-original-title', data);
  setTimeout(function() {
    if (link.is(':hover')) {
      link.tooltip("dispose").tooltip("show");
    }
  }, 1000);
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="card">
    <div class="card-body text-center">
      <a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

Tôi chỉ thử nghiệm điều này trong bootstrap 4 & w / o gọi .show ()

el.tooltip('hide').attr('data-original-title', 'message');

bạn có thể sử dụng mã này để ẩn mẹo công cụ thay đổi tiêu đề của nó và hiển thị lại chú giải công cụ, khi yêu cầu ajax trả về thành công.

$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() {  $(element).tooltip('show');}, 500);

Tôi đang sử dụng cách dễ dàng này:

$(document).ready(function() {
    $("#btn").prop('title', 'Click to copy your shorturl');
});

function myFunction(){
  $(btn).tooltip('hide');
  $(btn).attr('data-original-title', 'Test');
  $(btn).tooltip('show');
});

$(this).attr('data-original-title', 'click here to publish')
       .tooltip('fixTitle')
       .tooltip('show');

Hữu ích nếu bạn cần thay đổi văn bản của chú giải công cụ sau khi nó được khởi tạo với attr 'data-original-title'.