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