[jquery] 클릭시 Twitter 부트 스트랩 툴팁 내용 변경

Program / 글쓴이

앵커 요소에 툴팁이 있는데, 클릭하면 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는 제목을 즉시 업데이트하는 데 사용되며 툴팁이 숨겨져 다시 표시 될 때까지 기다리지 않습니다.