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

Program / 글쓴이

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