태그 보관물: twitter-bootstrap

twitter-bootstrap

Twitter 부트 스트랩 툴팁을 동적으로 생성 된 요소에 어떻게 바인딩합니까? 생성 된

다음과 같은 자바 스크립트로 Twitter 부트 스트랩 툴팁을 사용하고 있습니다.

$('a[rel=tooltip]').tooltip();

내 마크 업은 다음과 같습니다.

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

이것은 잘 작동하지만 <a>동적으로 요소를 추가하면 해당 동적 요소에 툴팁이 표시되지 않습니다. 문서가 일반적인 jquery $(document).ready(function()기능으로 로드가 완료되면 .tooltip ()을 한 번만 바인딩하기 때문 입니다.

이것을 동적으로 생성 된 요소에 어떻게 바인딩 할 수 있습니까? 일반적으로 jquery live () 메소드를 통해이 작업을 수행합니다. 그러나 바인딩에 사용하는 이벤트는 무엇입니까? jquery .live ()로 부트 스트랩 .tooltip ()을 연결하는 방법을 잘 모르겠습니다.

이 작업을 수행하는 한 가지 방법은 다음과 같습니다.

/* Add new 'rows' when plus sign is clicked */
$("a.add").live('click', function () {
    var clicked_li = $(this).parent('li');
    var clone = clicked_li.clone();

    clone.find(':input').each(function() {
        $(this).val('');
    });

    clicked_li.after(clone);
    $('a[rel=tooltip]').tooltip();
});

이것은 작동하지만 일종의 해킹처럼 보입니다. 또한 $ (ready) 호출에서 정확히 동일한 .tooltip () 줄을 호출합니다. 그렇다면 페이지가 처음로드되고 해당 선택기와 일치 할 때 존재하는 요소가 툴팁으로 두 번 끝나는가?

이 접근법에는 아무런 문제가 없습니다. 나는 행동에 대한 모범 사례 또는 이해를 찾고 있습니다.

답변

이거 한번 해봐: 

$('body').tooltip({
    selector: '[rel=tooltip]'
});

답변

초기화하려는 툴팁 구성이 여러 개인 경우이 방법이 효과적입니다. 

$("body").tooltip({
    selector: '[data-toggle="tooltip"]'
});

그런 다음 속성을 사용하여 개별 요소의 속성을 설정할 수 있습니다 data.

답변

나를 위해, mouseenter 이벤트를 잡는 것은 약간 버그가 있었고 툴팁이 제대로 표시되지 않거나 숨겨져 있지 않았습니다. 나는 이것을 써야했고, 이제 완벽하게 작동하고 있습니다.

$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});

답변

더 긴 답변을 여기에 게시했습니다 : https : //.com/a/20877657/207661

TL; DR : 문서 준비 이벤트에서 실행되는 한 줄의 코드 만 필요합니다.

$(document.body).tooltip({ selector: "[title]" });

다른 답변에서 제안 된 다른 더 복잡한 코드는 필요하지 않은 것 같습니다 (Bootstrap 3.0으로 테스트했습니다).

답변

나 에게이 js는 Paola 와 동일한 문제를 재현합니다.

내 해결책 :

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});

답변

전신에서 검색하는 대신. 그런 시나리오에서 이미 사용 가능한 동적 제목 옵션을 사용할 수 있습니다.

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

답변

이 답변을 조합하여 최상의 결과를 얻었습니다. 툴팁을 계속 배치하고 관련 컨테이너에 연결할 수 있습니다.

$('body').on('mouseenter', '[rel=tooltip]', function(){
  var el = $(this);
  if (el.data('tooltip') === undefined) {
    el.tooltip({
      placement: el.data("placement") || "top",
      container: el.data("container") || false
    });
  }
  el.tooltip('show');
});

$('body').on('mouseleave', '[rel=tooltip]', function(){
  $(this).tooltip('hide');
});

관련 HTML :

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>