ฉันมีคำแนะนำเครื่องมือในองค์ประกอบสมอที่ส่งคำขอ AJAX เมื่อคลิก องค์ประกอบนี้มีเคล็ดลับเครื่องมือ (จาก Twitter Bootstrap) ฉันต้องการให้เนื้อหาคำแนะนำเครื่องมือเปลี่ยนเมื่อคำขอ AJAX ส่งคืนสำเร็จ ฉันจะจัดการเคล็ดลับเครื่องมือหลังจากเริ่มต้นได้อย่างไร

เพิ่งพบสิ่งนี้ในขณะที่อ่านซอร์สโค้ด ดังนั้น$.tooltip(string)เรียกฟังก์ชั่นใด ๆ ภายในTooltipชั้นเรียน และถ้าคุณดูTooltip.fixTitleมันดึงdata-original-titleคุณลักษณะและแทนที่ค่าชื่อด้วย

ดังนั้นเราก็ทำ:

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

และแน่นอนว่ามันจะอัปเดตชื่อซึ่งเป็นค่าภายในคำแนะนำเครื่องมือ

วิธีอื่น (ดู @lukmdo แสดงความคิดเห็นด้านล่าง):

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

ใน Bootstrap 3 มันก็เพียงพอแล้วที่จะเรียกelt.attr('data-original-title', "Foo")เป็นการเปลี่ยนแปลงใน"data-original-title"แอ็ตทริบิวต์ที่ทริกเกอร์การเปลี่ยนแปลงในการแสดงคำแนะนำเครื่องมือ

อัปเดต:คุณสามารถเพิ่ม. ทูลทิป ('แสดง') เพื่อแสดงการเปลี่ยนแปลงได้ทันทีคุณไม่จำเป็นต้องวางเป้าหมายเม้าส์และวางเมาส์เพื่อดูการเปลี่ยนแปลงในชื่อเรื่อง

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

คุณสามารถอัปเดตข้อความคำแนะนำเครื่องมือโดยไม่เรียก show / hide:

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

นี่เป็นทางออกที่ดีถ้าคุณต้องการเปลี่ยนข้อความโดยไม่ปิดและเปิดคำแนะนำเครื่องมืออีกครั้ง

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

ด้วยวิธีนี้ข้อความถูกแทนที่โดยไม่ต้องปิดคำแนะนำเครื่องมือ (ไม่เปลี่ยนตำแหน่ง แต่ถ้าคุณทำคำเดียวเปลี่ยน ฯลฯ ก็ควรจะปรับ) และเมื่อคุณโฮเวอร์ off + back บนทูลทิปมันยังคงได้รับการอัปเดต

** นี่คือ bootstrap 3 สำหรับ 2 คุณอาจต้องเปลี่ยนชื่อข้อมูล / คลาส

สำหรับ Bootstrap 4:

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

ใช้งานได้หากคำแนะนำเครื่องมือได้รับการยกตัวอย่าง (อาจเป็นจาวาสคริปต์):

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

สำหรับ bootstrap 3.x

ดูเหมือนว่าวิธีการแก้ปัญหาที่สะอาดที่สุด:

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

แสดงใช้เพื่ออัปเดตชื่อทันทีและไม่รอให้คำแนะนำเครื่องมือถูกซ่อนและแสดงอีกครั้ง

นี่คือการอัปเดตสำหรับBootstrap 4 :

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

แต่วิธีที่ดีที่สุดคือทำสิ่งนี้:

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

หรือแบบอินไลน์:

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

จากด้าน UX คุณเพียงแค่เห็นข้อความที่มีการเปลี่ยนแปลงไม่มีผลซีดจางหรือซ่อน / _fixTitleแสดงและมีความต้องการไม่มี

คุณสามารถเปลี่ยนการdata-original-titleใช้รหัสต่อไปนี้:

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

ต่อไปนี้เป็นวิธีที่ดีที่สุดสำหรับฉันโดยทั่วไปฉันจะทิ้งคำแนะนำเครื่องมือที่มีอยู่เดิมแล้วและไม่รำคาญที่จะแสดงคำแนะนำเครื่องมือใหม่ หากการเรียกแสดงคำแนะนำบนเครื่องมือเหมือนกับคำตอบอื่น ๆ จะปรากฏขึ้นแม้ว่าเคอร์เซอร์จะไม่ลอยอยู่เหนือ

เหตุผลที่ฉันไปแก้ปัญหานี้ก็คือโซลูชันอื่น ๆ การใช้คำแนะนำเครื่องมือที่มีอยู่อีกครั้งทำให้เกิดปัญหาแปลก ๆ กับคำแนะนำเครื่องมือบางครั้งไม่แสดงเมื่อวางเคอร์เซอร์ไว้เหนือองค์ประกอบ

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

ใน bootstrap 4 ฉันใช้$(el).tooltip('dispose');แล้วสร้างใหม่ตามปกติ ดังนั้นคุณสามารถวางการกำจัดทิ้งไว้ก่อนหน้าที่จะสร้างคำแนะนำเครื่องมือเพื่อให้แน่ใจว่ามันจะไม่เพิ่มขึ้นเป็นสองเท่า

การตรวจสอบสถานะและคนจรจัดด้วยค่าดูเป็นมิตรน้อยกว่า

คุณสามารถตั้งค่าเนื้อหาในการโทรคำแนะนำเครื่องมือด้วยฟังก์ชั่น

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

คุณไม่จำเป็นต้องใช้ชื่อเฉพาะขององค์ประกอบที่เรียกว่า

ขอบคุณรหัสนี้มีประโยชน์มากสำหรับฉันฉันพบว่ามันมีประสิทธิภาพในโครงการของฉัน

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

ทำลายคำแนะนำเครื่องมือที่มีอยู่แล้วเพื่อให้เราสามารถ repopulate ด้วยเนื้อหาคำแนะนำเครื่องมือใหม่

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

ฉันไม่สามารถหาคำตอบใด ๆ ได้เลยนี่เป็นวิธีแก้ไข:

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

ฉันคิดว่าเมห์เม็ตดูแรนเกือบจะถูก แต่มีปัญหาบางอย่างเมื่อใช้หลายคลาสพร้อมกับคำแนะนำเครื่องมือเดียวกันและการจัดวาง รหัสต่อไปนี้ยังช่วยหลีกเลี่ยงข้อผิดพลาดในการตรวจสอบ js หากมีคลาสใดที่เรียกว่า "tooltip_class" หวังว่านี่จะช่วยได้

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

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

    }

เปลี่ยนข้อความโดยการแก้ไขข้อความในองค์ประกอบโดยตรง (ไม่อัปเดตตำแหน่งเคล็ดลับเครื่องมือ)

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

เปลี่ยนข้อความโดยทำลายคำแนะนำเครื่องมือเก่าจากนั้นสร้างและแสดงเครื่องมือใหม่ (ทำให้อันเก่าจางหายไปและอันใหม่จะจางหายไป)

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

ฉันใช้วิธีการอันดับต้น ๆ ในการ "บันทึก" ข้อความ (การใช้&nbspดังนั้นคำแนะนำเครื่องมือจะไม่เปลี่ยนแปลงขนาด) และเพื่อเปลี่ยนข้อความเป็น "เสร็จสิ้น" (บวก padding) เมื่อคำขอเสร็จสมบูรณ์

$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 */);
});

สิ่งนี้ใช้ได้สำหรับฉัน: (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>

คุณลักษณะdata-html="true"อนุญาตให้ใช้ html บนชื่อคำแนะนำเครื่องมือ

ด้วย Tooltip วัตถุ Boostrap:

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

สำหรับ BS4 (และ BS3 ที่มีการเปลี่ยนแปลงเล็กน้อย) .. หลังจากผ่านไปหลายชั่วโมงของการค้นหาและทดลองฉันมาพร้อมกับทางออกที่น่าเชื่อถือที่สุดสำหรับปัญหานี้และมันยังแก้ปัญหาการเปิดมากกว่าหนึ่ง (คำแนะนำเครื่องมือหรือป๊อปโอเวอร์) ในเวลาเดียวกัน และปัญหาของการเปิดโดยอัตโนมัติหลังจากสูญเสียโฟกัส ฯลฯ

$('[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>

ฉันทดสอบสิ่งนี้เฉพาะในbootstrap 4 & w / o การโทร. show ()

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

คุณสามารถใช้รหัสนี้เพื่อซ่อนเคล็ดลับเครื่องมือเปลี่ยนชื่อและแสดงคำแนะนำเครื่องมืออีกครั้งเมื่อคำขอ ajax ส่งคืนสำเร็จ

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

ฉันใช้วิธีง่ายๆนี้:

$(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');

มีประโยชน์หากคุณต้องการเปลี่ยนข้อความของคำแนะนำเครื่องมือหลังจากเริ่มต้นด้วย attr 'data-original-title'