나 여기 화났어
다음 HTML이 있습니다.
<a href="#" rel="tooltip" title="A nice tooltip">test</a>그리고 Bootstrap 스타일 툴팁은 일반적인 툴팁 표시를 거부합니다.
bootstrap.css가 제대로 작동하고 거기에서 클래스를 볼 수 있습니다.
내 HTML 파일의 끝에 모든 관련 JS 파일이 있습니다.
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>
나는 Bootstrap의 예제 소스를 살펴 보았고 어디에서나 툴팁을 시작하는 것을 볼 수 없습니다. 그래서 나는 그것이 효과가 있어야한다고 생각하고 있습니까, 아니면 여기에 중요한 것이 빠져 있습니까?
나는 모달과 경고 및 다른 것들이 잘 작동하므로 전체 바보가 아닙니다.)
도움을 주셔서 감사합니다!
답변
요약 : jQuery 선택기를 사용하여 툴팁 활성화
<script type="text/javascript">
$(function () {
$("[rel='tooltip']").tooltip();
});
</script>
실제로, 속성 선택기를 사용할 필요가 없습니다 rel="tooltip". 태그에 없는 요소라도 요소에서 호출 할 수 있습니다 .
답변
동일한 문제가 발생한 후,이 솔루션이 Bootstrap 필수 속성 외부에 태그 속성을 추가하지 않고도 작동하는 것으로 나타났습니다.
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>JQuery
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
도움이 되었기를 바랍니다!
답변
모든 js 파일이 별도로 필요하지는 않습니다.
모든 부트 스트랩 기능을 사용하려면 다음 파일을 사용하십시오.
-bootstrap.css
-bootstrap.js둘 다 http://twitter.github.com 에서 찾을 수 있으며
마지막으로
jquery.js의 최신 버전
글 리피 콘의 경우 이미지가 필요합니다
웹 사이트의 / img / 폴더 안에 업로드해야하는 glyphicons-halfings.png 및 / 또는 glyphicons-halfings-white.png (흰색 이미지) .css
툴팁 의 경우 <head> </head>태그 안에 다음 스크립트가 필요합니다
<script type='text/javascript'>
$(document).ready(function () {
if ($("[rel=tooltip]").length) {
$("[rel=tooltip]").tooltip();
}
});
</script>그게 다야 …
답변
http://getbootstrap.com/javascript/#tooltips-usage
옵트 인 기능 성능상의 이유로 툴팁 및 Popover 데이터 -api가 옵트 인됩니다.
직접 초기화해야합니다.
페이지에서 모든 툴팁을 초기화하는 한 가지 방법은 data-toggle 속성으로 선택하는 것입니다.
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>이 코드를 HTML에 넣으면 툴팁을 사용할 수 있습니다
예 :
<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>답변
나는 이것이 오래된 질문이라는 것을 알고 있지만 부트 스트랩의 새로운 릴리스 에서이 문제가 있었고 웹 사이트에서 명확하지 않기 때문에 툴팁을 활성화하는 방법은 다음과 같습니다.
요소에 “툴팁 테스트”와 같은 클래스를 제공하십시오.
그런 다음 자바 스크립트 태그 에서이 클래스를 활성화하십시오.
<script type="text/javascript">
$('.tooltip-test').tooltip();
</script>
<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>답변
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>JQuery
$(document).ready(function() {
$('[data-toggle=tooltip]').tooltip();
}); 이것은 나를 위해 일하고 있습니다.
답변
당신이 할 경우 $("[rel='tooltip']").tooltip();다른 답변이 제안으로 다음은 DOM에 현재있다 요소에 툴팁을 활성화합니다. 즉, DOM을 변경하고 나중에 동적 내용을 삽입하면 작동하지 않습니다. 또한 JQuery 이벤트 위임을 사용하는 대신 개별 요소에 대한 이벤트 핸들러를 설치하기 때문에 효율성이 훨씬 떨어집니다 . 따라서 부트 스트랩 툴팁을 활성화하는 가장 좋은 방법은 문서에 준비하고 잊어 버릴 수있는 한 줄의 코드입니다.
$(document.body).tooltip({ selector: "[title]" });또는 title대신 선택기로 사용 하고 있습니다. 이것은 다른 많은 요소에 적용 할 수 있다는 장점이있다합니다 (이 되어 가정 에만 앵커로)하고 또한 오래된 브라우저 “대체”로 작동합니다.rel=titledata-titlerel
또한 data-toggle="tooltip"위 코드를 사용하는 경우 속성이 필요하지 않습니다 .
부트 스트랩 툴팁은 각 요소에서 마우스 이벤트를 처리해야하므로 비용이 많이 듭니다. 이것이 기본적으로 활성화되지 않은 이유입니다. 따라서 위의 줄을 주석 처리하기로 결정한 경우 title 속성을 사용하면 페이지가 계속 작동합니다.
title 속성을 사용 하지 않으면 Hint.css와 같은 순수한 CSS 솔루션을 사용하거나 JavaScript 코드가 전혀 필요하지 않은 http://csstooltip.com 을 확인 하는 것이 좋습니다 .
