트위터 부트스트랩 툴팁을 동적으로 생성된 요소에 바인딩하려면 어떻게 해야 합니까?

트위터 부트스트랩 툴팁을 동적으로 생성된 요소에 바인딩하려면 어떻게 해야 합니까?

다음과 같은 Javascript가 있는 Twitter 부트스트랩 툴팁을 사용하고 있습니다.

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

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

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

이것은 잘 작동하지만, 나는 덧붙입니다.<a>동적으로 요소가 표시되지만 이러한 동적 요소에 대한 도구 설명이 표시되지 않습니다.일반적인 jquery로 문서 로드가 완료되면 .tooltip()을 한 번만 바인딩하기 때문이라는 것을 알고 있습니다.$(document).ready(function()기능성

동적으로 생성된 요소에 바인딩하려면 어떻게 해야 합니까?보통 jquery live() 메서드를 사용합니다.그런데 바인딩할 때 사용하는 이벤트는 무엇입니까?jquery.live()와 bootstrap.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특성.

저는 mouse enter 이벤트를 잡는 것만 조금 버그가 있었고, 툴팁이 제대로 표시/숨기지 않았습니다.저는 이것을 써야 했고, 그것은 지금 완벽하게 작동하고 있습니다.

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

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

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

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

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

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

나에게, 이 js는 파올라에서 일어나는 것과 같은 문제를 재현합니다.

내 솔루션:

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

jQuery를 사용하지 않는 부트스트랩 5에서는 다음을 수행할 수 있습니다.

const btn = document.createElement('button');
btn.innerHTML = 'Click me';
btn.dataset['toggle'] = 'tooltip';
btn.dataset['placement'] = 'top';
btn.title = 'Your Tooltip Here';
new bootstrap.Tooltip(btn);

document.getElementById('parent').appendChild(btn);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy" crossorigin="anonymous"></script>
<div id="parent"></div>

언급URL : https://stackoverflow.com/questions/9958825/how-do-i-bind-twitter-bootstrap-tooltips-to-dynamically-created-elements