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

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

---

부트 스트랩의 툴팁에 문제가 있습니다. 버튼을 클릭하면 커서가 버튼 밖에 있어도 툴팁이 유지됩니다. 매뉴얼 -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')
})

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

---

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

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

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

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

---

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

$('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');
    });

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

---

내 경우에는 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
    });

---

The way I fixed this issue was by removing the tooltip in the click event function using the following code:

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

---

in angular 7 with bootstrap 4 and jquery I found this and it works fine. I used dispose because it destroys does not hide the tooltip.

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

---

I'm using bootstrap tooltip in cycle.js and none of the above worked for me.

I had to do this:

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

---

This works for me :

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

});

I was disabling save button dynamically then problem was.

---

Inside your document ready function use this

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

---

This solution worked for me.

$('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');
});

fiddle

I tried most of the solutions given in previous answers, but none of them worked for me.

---

My problem is in DataTable. Below code works for me.

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

---

You can also use below method to hide tooltip on mouseleave, As below:

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

---

In my case for this was the fix:

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

I wasn't obeying this rule from Bootstrap docs:

Tooltips must be hidden before their corresponding elements have been removed from the DOM.

참고URL : https://stackoverflow.com/questions/33584392/bootstraps-tooltip-doesnt-disappear-after-button-click-mouseleave