버튼을 클릭하고 마우스를 놓은 후에도 부트 스트랩의 툴팁이 사라지지 않습니다.

부트 스트랩의 툴팁에 문제가 있습니다. 버튼을 클릭하면 커서가 버튼 밖에 있어도 툴팁이 유지됩니다. 매뉴얼 -Bootstrap의 툴팁 을 살펴 보았고 버튼을 클릭하면 동일한 문제가 나타납니다. 이 문제를 해결할 해결책이 있습니까? 최신 FF, IE에서 시도했습니다.

trigger설정되지 않았기 때문 입니다. 트리거의 기본값은입니다 'hover focus'. 따라서 버튼이이므로 다른 버튼을 클릭 할 때까지 버튼을 클릭 한 후에도 툴팁이 계속 표시됩니다 focused.

그래서 당신이해야 할 일은 단지 로 정의 trigger하는 'hover'것입니다. 버튼을 클릭 한 후 툴팁을 유지하지 않고 링크 한 동일한 예제 아래 :

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

바이올린의 문서 예제-> http://jsfiddle.net/vdzvvg6o/

나는 1 년 이상 된 것을 알고 있지만 여기에서 어떤 예제와도 작동하지 못했습니다. 다음을 사용해야했습니다.

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

또한 마우스를 올리면 툴팁이 다시 표시됩니다.

안녕하세요 저는이 문제에 대한 해결책이 거의 없습니다. 다른 솔루션이 작동하지 않으면 다음을 시도하십시오.

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

이것은 드래그 앤 드롭을위한 솔루션이기도합니다. 그래서 나는 이것이 누군가를 돕기를 바랍니다 :)

제 경우에는 Internet Explorer에서만 문제가 재현되었습니다. 어떤 요소 (입력, div 등 ...)에 도구 설명이 있는지에 관계없이 클릭하면 도구 설명이 계속 표시됩니다.

요소 클릭 이벤트에 대한 툴팁 .hide ()를 권장하는 웹에서 몇 가지 솔루션을 찾았습니다.하지만 나쁜 생각입니다. 동일한 요소로 다시 마우스를 가져 가면 숨겨져 있습니다 ... 제 경우에는

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

모든 마법을 만들었습니다 !!!-여기서 .myToolTippedElement는 코스의 툴팁이있는 요소입니다.

부트 스트랩 4와 jquery가있는 각도 7에서 나는 이것을 발견했고 잘 작동합니다. 도구 설명을 숨기지 않기 때문에 폐기를 사용했습니다.

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

내 경우에는 rel="tooltip"대신 사용하십시오 data-toggle="tooltip". 나는 사용 data-toggle="tooltip"하고 있었고 트리거 조건을 제 경우에는 작동하지 않는 호버로 설정했습니다. 데이터 선택기를 변경했을 때 작동했습니다.

HTML 코드 :

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

JS 코드 // Tooltip $ ( '. btn'). tooltip ({trigger : 'hover'});

이렇게하면 고정 된 툴팁이 확실히 제거됩니다.

위의 David의 대답은 내 문제를 해결하는 데 도움이되었습니다. 버튼에 마우스 오버 및 클릭 이벤트가 모두 있습니다. MAC의 Firefox는 내가 원하는대로 작동했습니다. 즉, 마우스 오버시 툴팁을 표시하고 클릭시 툴팁을 표시하지 않습니다. 다른 브라우저 및 OS에서는 클릭하면 툴팁이 표시되고 계속 표시됩니다. 마우스를 다른 버튼으로 이동하여 마우스를 올려도. 이것이 내가 가진 것입니다.

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 

이것은 수정 사항입니다.

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 

또한 다음을 추가 할 수 있습니다.

onclick="this.blur()"

작업 솔루션

$(document).on("click",function()
    {
    setTimeout(function()
    {

  $('[data-toggle="tooltip"]').tooltip('hide');

},500);    // Hides tooltip in 500 milliseconds
    });

이 문제를 해결 한 방법은 다음 코드를 사용하여 클릭 이벤트 함수에서 도구 설명을 제거하는 것입니다.

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

나는 cycle.js에서 부트 스트랩 툴팁을 사용하고 있으며 위의 어느 것도 나를 위해 일하지 않았습니다.

나는 이것을해야했다 :

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

이것은 나를 위해 작동합니다.

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

저장 버튼을 동적으로 비활성화했는데 문제가 발생했습니다.

문서 준비 기능 내에서 이것을 사용하십시오.

 $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
               trigger : 'hover'
            });
    });

이 솔루션은 저에게 효과적이었습니다.

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
  event.stopPropagation();
});

$('body').click(function(){
  $('a[data-toggle="tooltip"]').tooltip('hide');
});

깡깡이

이전 답변에서 제공된 대부분의 솔루션을 시도했지만 그중 어느 것도 나를 위해 일하지 않았습니다.

내 문제는 DataTable에 있습니다. 아래 코드는 저에게 효과적입니다.

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }

아래 방법을 사용하여 mouseleave에 툴팁을 숨길 수도 있습니다 .

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

제 경우에는 수정 사항입니다.

beforeDestroyingElement() {    
  $('[data-toggle="tooltip"]').tooltip('hide');
}

나는 Bootstrap 문서 의이 규칙을 따르지 않았습니다.

툴팁은 해당 요소가 DOM에서 제거되기 전에 숨겨져 야합니다.

다음을 추가하여 HTML에서도이 작업을 수행 할 수 있습니다.

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

또한 받아 들여진 답변이 저에게 효과가 없었고이 코드를 내 자신과 그 작업에 잘 작성했기 때문에 이전 버전에 대해이 방법을 사용할 수 있습니다.

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

누군가 클릭 후 얼마 동안 표시되는 툴팁을 설정하려면 다음과 같이하십시오.

$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})  

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

강제 blur ()를 사용하면 사용자 경험을 감소시킬 수 있습니다. 나는 그렇게하지 않을 것입니다. "data-original-title"을 제거하고 "data-toggle"및 "title"속성을 제거하면 효과가 있다는 것을 알았습니다.

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");