앵커 요소에 툴팁이 있는데, 클릭하면 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".

업데이트 : 변경 사항을 즉시 표시하기 위해 .tooltip ( 'show')을 추가 할 수 있습니다. 제목의 변경 사항을보기 위해 마우스를 올려 놓거나 마우스로 가리킬 필요가 없습니다.

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)

이렇게하면 텍스트가 툴팁을 닫지 않고 대체됩니다 (위치 변경은 없지만 한 단어 변경 등을 수행하는 경우 괜찮습니다). 툴팁을 껐다가 다시 켜도 여전히 업데이트됩니다.

** 이것은 부트 스트랩 3입니다 .2이기 때문에 아마도 데이터 / 클래스 이름을 변경해야합니다

부트 스트랩 4의 경우 :

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

툴팁이 인스턴스화 된 경우 (Javascript로 가능) 작동합니다.

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

부트 스트랩 3.x

이것은 가장 깨끗한 솔루션처럼 보입니다.

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

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

부트 스트랩 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>

다음은 저에게 가장 효과적이었습니다. 기본적으로 기존 툴팁을 폐기하고 새 툴팁을 표시하지 않아도됩니다. 다른 답변과 같이 툴팁에서 show를 호출하면 커서가 커서 위에 있지 않아도 팝업이 나타납니다.

이 솔루션을 선택한 이유는 기존 툴팁을 재사용하는 다른 솔루션으로 인해 요소 위에 커서를 놓을 때 툴팁에 때때로 이상한 문제가 발생했기 때문입니다.

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

부트 스트랩 4에서는 방금 사용 $(el).tooltip('dispose');하고 정상적으로 다시 만듭니다. 따라서 툴팁을 생성하여 함수가 두 배가되지 않도록하는 함수 앞에 처리를 넣을 수 있습니다.

상태를 점검하고 값을 가진 땜장이는 덜 친근한 것처럼 보입니다.

함수를 사용하여 툴팁 호출에 내용을 설정할 수 있습니다

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

호출 된 요소의 제목 만 사용할 필요는 없습니다.

이 코드가 매우 도움이 되었기 때문에 프로젝트에서 효과적이라는 것을 알았습니다.

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

기존 툴팁을 삭제하여 새로운 툴팁 내용으로 다시 채울 수 있습니다.

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

나는 대답을 얻지 못했습니다. 해결 방법은 다음과 같습니다.

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

나는 Mehmet Duran이 거의 옳다고 생각하지만 동일한 툴팁과 배치로 여러 클래스를 사용할 때 약간의 문제가있었습니다. 다음 코드는 또한 "tooltip_class"라는 클래스가 있는지 확인하는 js 오류를 방지합니다. 도움이 되었기를 바랍니다.

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툴팁의 크기가 변경되지 않음) 텍스트를 "완료"로 변경하십시오. 요청이 완료되면 (플러딩).

$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을 사용할 수 있습니다.

툴팁 객체로 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>

나는 이것을 부트 스트랩 4 에서만 테스트하고 .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'로 초기화 한 후 툴팁의 텍스트를 변경해야하는 경우에 유용합니다.