부트 스트랩 툴팁이 작동하지 않습니다

260

나 여기 화났어

다음 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의 예제 소스를 살펴 보았고 어디에서나 툴팁을 시작하는 것을 볼 수 없습니다. 그래서 나는 그것이 효과가 있어야한다고 생각하고 있습니까, 아니면 여기에 중요한 것이 빠져 있습니까?

나는 모달과 경고 및 다른 것들이 잘 작동하므로 전체 바보가 아닙니다.)

도움을 주셔서 감사합니다!

twitter-bootstrap 
— 마이크 바틀렛
소스
2
툴팁은 트위터 예제의 application.js 파일에서 시작됩니다. HTML을 게시 할 수 있습니까? 스크립트를 초기화하는 방법을 살펴보고 싶습니다.
— Andres Ilich
2
Ahhhhh .... 나는 첫 번째 의견이 주어진 것을 무시했다. 그래서해야이 작품 : code<a href="#" rel="tooltip" title="A class="tooltip-test"> 테스트 tooltip" 좋은 </a>에로 <br> <script> // 툴팁 데모 $ ( ' .tooltip-test '). tooltip () </ script>
— Mike Bartlett
1
선택 도구를 툴팁 옵션에 전달하는 것을 잊지 마십시오.$('.tooltip-test').tooltip({ selector: "a" })
— Andres Ilich
감사합니다 Andres. 실제로 나는 거기에 선택기가 필요하지 않은 것 같습니다 .a 클래스가 툴팁 테스트로 참조되기 때문이라고 생각합니다.
— Mike Bartlett
3
선택기 옵션이 없으면 툴팁이 작동하지 않습니다. 다음은 jsfiddle.net/VXctp 데모 입니다. 선택기없이 사용해보십시오.
— Andres Ilich

답변:

276

요약 : jQuery 선택기를 사용하여 툴팁 활성화

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

실제로, 속성 선택기를 사용할 필요가 없습니다 rel="tooltip". 태그에 없는 요소라도 요소에서 호출 할 수 있습니다 .

— 마누엘 에버트
소스
13
Rails로 작업하는 사람들은 이미로 정의되어 bootstrap.js.coffee있습니다 $(".tooltip").tooltip(). 에 포함시켜야 //= require bootstrap합니다 application.js.
— slhck
6
.tooltip 클래스를 요소에 추가하면 툴팁이 손상됩니다. .tooltip 클래스가있는 요소 내부의 내용이 숨겨지고 마우스로 숨겨진 요소를 찾은 경우 도구 설명이 표시됩니다. 잘 작동합니다 다른 선택 또는 클래스 이름을 사용하여 \.
— 레오 넬 갈란
4
@Leito 맞습니다. 부트 스트랩은 스타일을 정의 .tooltip하며 기본적으로 보이지 않습니다. 그러나 rel속성이나 다른 클래스를 선택 자로 사용할 수 있습니다 .
— Manuel Ebert
3
예, HTML 마크 업과 JS 선택기가 모두 필요합니다. 툴팁을 적용하는 다른 방법은 아닙니다.
— ATSiem
1
일부는 모달에 툴팁을 표시하려고 시도 할 수 있으며 일부 부트 스트랩 버전에서는 작동하지 않습니다. 모달이 아닌 일반 페이지에서 시도하고 작동하면 문제가 있음을 알 수 있습니다.
— mjnissim
212

동일한 문제가 발생한 후,이 솔루션이 Bootstrap 필수 속성 외부에 태그 속성을 추가하지 않고도 작동하는 것으로 나타났습니다.

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

도움이 되었기를 바랍니다!

— 마커스 호 엘셔
소스
20
감사! 이것은 나를 위해 일했습니다. 어떻게 든이 페이지의 다른 솔루션이 효과가 없었습니다.
— 로마
1
나는 로마와 함께 있습니다. 이 솔루션은 bootswatch css 변형과도 작동합니다.
— DaveCS
이것은 나를 위해 일했습니다. 내가 이것을 시도하기 전까지는 아무것도 인생에 들어갔습니다. 감사!
— BlakePetersen 5
1
이것은 나에게도 효과가있었습니다. 모든 아이디어가 왜 $ ( '[data-toggle = "tooltip"]'). tooltip ({ 'placement': 'top'}); 작동하지 않습니까?
— ZeroCool
고마워, 이것은 나를 위해 일했다. JQuery 라이브러리를로드 한 후 <script> 태그 사이에 코드를 삽입하십시오.
— GeraldScott
31

모든 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>

그게 다야 ...

— 하 리쉬 쿠마르
소스
27

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>
— 최대 O.
소스
2
이 옵트 인 개념을 공유해 주셔서 감사합니다! 튜토리얼에서 읽지 마십시오.
— dpp
내 jquery / bootstrap 툴팁 whoas에 대한 솔루션
— DJ Burb
제공된 링크가 없습니다 : getbootstrap.com/docs/4.1/components/tooltips
— Guillaume Husta
20

나는 이것이 오래된 질문이라는 것을 알고 있지만 부트 스트랩의 새로운 릴리스 에서이 문제가 있었고 웹 사이트에서 명확하지 않기 때문에 툴팁을 활성화하는 방법은 다음과 같습니다.

요소에 "툴팁 테스트"와 같은 클래스를 제공하십시오.

그런 다음 자바 스크립트 태그 에서이 클래스를 활성화하십시오.

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— 아미르 솔레이 마니
소스
이것은 나를 위해 일한 유일한 솔루션이었습니다. data-original-title = "{{someAngularJSVar}}"을 사용하여 제목을 업데이트하고 있으며 완벽하게 작동합니다.
— WKara
19

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

이것은 나를 위해 일하고 있습니다.

— 이고르 시보 독
소스
1
이 제안은 나에게도 완벽하게 작동했습니다. 단순하고 우아하기 때문에 마음에 들었습니다. 드롭 다운 및 탭 요소에서와 같이 플러그인이 기본적으로 초기화 된 것처럼 부트 스트랩 표준 을 계속 사용할 수 있습니다 . @Igor가 제안한 JS를 새 파일에 추가하고 원본 bootstrap.js에 번들했습니다
— Iago Rodríguez-Quintana
14

당신이 할 경우 $("[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 을 확인 하는 것이 좋습니다 .

— 시탈 샤
소스
역동적 인 세대가 여러 단계 깊어지기 때문에이 문제로 어려움을 겪고 있습니다. href 값은 동적으로 생성 된 컨텐츠이며 결과 div id는 href 값과 일치하는 항목 번호를 기반으로합니다. 따라서 항목 유형 A의 링크 페이지가 있으면 항목 a-1, 항목 a-2, 항목 a-3의 목록이 있으며 각 링크는 항목 개별 페이지에 대한 것입니다. 마우스 오버시 동적 컨텐츠를 표시하는 툴팁 컨텐츠이므로 사용자는 전체 링크를 클릭하기 전에 항목에 대한 정보를 얻을 수 있습니다.
— Melanie Sumner
가장 도움이되었습니다. 툴팁을 아이콘에 바인딩하도록 설정했으며 아이콘 라이브러리에 일종의 비동기 로딩이있어 바인딩 할 수 없었습니다. 클래스 선택기를 사용할 때 작동하지만 ID는 사용하지 않기 때문에 너무 이상했습니다. 도와 주셔서 감사합니다!
— Nick Woodhams
14

이것이 가장 간단한 방법입니다. 이걸 먼저 넣으십시오 </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

툴팁 에 대한 부트 스트랩 문서에 제공된 예제를 확인하십시오 .

예를 들면 다음과 같습니다. 

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>
— 마르코스 카시아 노
소스
2
type 속성을 닫으십시오 ... 오타 하나만 편집하는 것은 PITA입니다 : S
— Mohd Abdul Mujib 1
10

툴팁 및 팝 오버는 드롭 다운 또는 진행률 표시 줄과 같은 CSS 플러그인 만이 아닙니다. 툴팁과 팝 오버를 사용하려면 jquery (javascript 읽기)를 사용하여 활성화해야합니다.

html 버튼을 클릭하면 팝업이 표시되도록하겠습니다.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

그런 다음 팝 오버를 활성화하려면 다음 자바 스크립트 코드가 있어야합니다.

$('.popovers-to-be-activated').popover();

실제로, 위의 자바 스크립트 코드는 "popovers-to-be-activated"클래스가있는 모든 html 요소에서 popover를 활성화합니다.

말할 것도없이 DOM이 준비 되 자마자 위의 자바 스크립트를 DOM 지원 콜백에 넣어 모든 팝 오버를 활성화하십시오.

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— Mayank Jaiswal
소스
5

헤드 섹션에서 먼저 다음 코드를 추가해야합니다.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});
</script>

그런 다음 본문 섹션에서 다음 코드를 작성해야합니다.

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

— 러쉬 .2707
소스
4

모든 것이 여전히 해결되지 않으면 최신 Jquery 라이브러리 사용, 최신 부트 스트랩 2.0.4 및 jquery-1.7.2.js를 사용하는 경우 jquery 선택기가 필요하지 않습니다.

그냥 사용 rel="tooltip" title="Your Title" data-placement=" "

데이터 배치에서 원하는대로 위 / 아래 / 왼쪽 / 오른쪽을 사용하십시오.

— 하 리쉬 쿠마르
소스
3

헤더에 jquery와 bootstrap-tooltip.js를 추가했습니다. 바닥 글에이 코드를 추가하면 효과가 있습니다! 그러나 헤더에 동일한 코드를 추가하면 작동하지 않습니다! 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— 카르 틱
소스
3
이 경우 DOM이 아직로드되지 않았으므로 모든 요소가 페이지에 없습니다. 위 코드를$(function() { ... });
— johnml
3

Rails + Haml을 사용하는 것이 툴팁을 포함하는 것이 훨씬 쉬운 경우

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

그것은 요소 끝에 다음 줄을 추가하는 것입니다.

:rel => "tooltip", :title => "Referential Guide"
— 안드레스 칼레
소스
실제로 그것이 나를 위해 일하기를 바라고 있었지만, 아쉽게도 그렇지 않았습니다.
— turboladen
지금은 Rails보다 Djanto에 더 가깝지만 코드를 붙여 넣으면 팁을 줄 수 있습니다.
— Andres Calle
3

필자의 경우에는 두 가지 버전의 jQuery를 포함했기 때문에 작동하지 않았습니다. 하나는 부트 스트랩 용이고 다른 하나는 Google 차트 용입니다.

차트의 jQuery 로딩을 제거하면 정상적으로 작동합니다.

— 디 이터
소스
3

방금 추가했습니다.

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

아래 bootstrap.min.js 및 작동합니다.

— Andy.sin
소스
3

예제를 사용하여 문서의 HTML 요소에 툴팁을 추가하는 방법을 보여줍니다.

노트:

이러한 툴팁 샘플을 페이지에 넣을 때 작동하지 않으면 다른 문제가있는 것입니다. 다음과 같은 것을 살펴 봐야합니다.

  • 포함되는 스크립트의 순서
  • 제거 된 HTML 요소를 초기화하려고하는지 확인하십시오.
  • 더 이상 포함하지 않는 JS 파일에서 메소드를 호출하려고하는지 확인하십시오.

  • 필요한 기능을 제공하는 JS 파일이 포함되어 있는지 확인하십시오 (툴팁뿐만 아니라 페이지에서 사용하는 구성 요소 용).

    <head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

위의 항목 중 하나라도 실패하면 자바 스크립트가로드 및 / 또는 실행되는 것을 막을 수 있으며 모든 것이 멋지게 유지됩니다.

작업 예

배지가 있고 사용자가 배지 위로 마우스를 가져갈 때 툴팁을 표시한다고 가정 해 봅시다.

원본 HTML :

<span class="badge badge-sm badge-plain">Admin Mode</span>

일반 부트 스트랩 툴팁

HTML 요소에 대한 툴팁을 작성하고 일반 부트 스트랩 툴팁을 사용하는 경우 고유 JavaScript 코드를 사용하여 툴팁 이니셜 라이저를 호출해야합니다.

전에

<span class="badge badge-sm badge-plain">Admin Mode</span>

후

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

이니셜 라이저

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

부트 스트랩 템플릿 툴팁 (예 : INSPINIA)

부트 스트랩 템플릿 (예 : INSPINIA)을 사용하는 경우 템플릿 기능을 지원하는 지원 스크립트가 포함됩니다.

    <script src="/Scripts/app/inspinia.js" />

INSPINIA의 경우 포함 된 스크립트는 문서로드가 완료되면 다음 자바 스크립트 코드를 실행하여 모든 툴팁을 자동으로 초기화합니다.

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

이 때문에 INSPINIA 스타일 툴팁을 직접 초기화 할 필요는 없습니다. 그러나 특정 방식으로 요소를 형식화해야합니다. 이니셜 라이저는 속성 tooltip-demo에서 HTML 요소를 class찾은 다음 속성을 정의한 하위 요소 tooltip()를 초기화하기 위해 메서드를 호출합니다 . data-toggle="tooltip"

이 예 배지를 들어, (a 같은 주변 외부 소자 배치 <div>또는 <span>가짐) class="tooltip-demo", 그 배치 data-toggle, data-placement및 title배지 인 요소 내의 실제 툴팁 특성. 위와 같이 원본 HTML을 수정하십시오.

전에

<span class="badge badge-sm badge-plain">Admin Mode</span>

후

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

이니셜 라이저

None

요소 내의 모든 하위 요소 <span class="tooltip-demo">에는 도구 설명이 올바르게 준비되어 있습니다. 툴팁이 필요한 세 가지 자식 요소를 하나의 컨테이너에 넣을 수 있습니다.

도구 설명이있는 여러 항목

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

이를위한 최선의 사용은을 추가하는 것입니다 class="tooltip-demo"A를 <td>또는 바깥 쪽 <div>또는 <span>.

템플릿을 사용하는 동안 일반 부트 스트랩 툴팁

INSPINIA를 사용하고 있지만 외부 <div>또는 <span>태그를 추가 하여 툴팁을 생성 하지 않으려 는 경우 템플릿을 방해하지 않고 표준 부트 스트랩 툴팁을 사용할 수 있습니다. 이 경우 툴팁을 직접 초기화해야합니다. 그러나 class툴팁 항목을 식별 하려면 속성에 사용자 정의 값을 사용해야 합니다. 이렇게하면 툴팁 이니셜 라이저가 INSPINIA의 영향을받는 요소를 방해하지 않습니다. 이 예에서는 다음을 사용하겠습니다 standalone-tt.

전에

<span class="badge badge-sm badge-plain">Admin Mode</span>

후

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

이니셜 라이저

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>
— 마이크 스틸 리온
소스
2

javascript가 포함 된 툴팁이 포함 된 HTML을 만든 다음 문서에 삽입하는 경우 문서로드가 아닌 HTML을 문서에 삽입 한 후 팝업 / 툴팁을 활성화해야합니다.

— chri_chri
소스
2

당신은 툴팁 자바 스크립트를 삽입해야 후 html로. 이처럼 :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

또는 $ (document) .ready 사용하십시오 : 

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

툴팁 html을 javascript 앞에 놓기 때문에 툴팁이 작동 하지 않으므로 툴팁에 대한 자바 스크립트가 있는지 알 수 없습니다. 제 생각에는 스크립트가 위에서 아래로 읽 힙니다.

— 줌
소스
2

비슷한 문제가 있었고 특히 세로 버튼 컨테이너와 같은 버튼 컨테이너에서 실행중인 경우. 이 경우 컨테이너를 '본문'으로 설정해야합니다

I have added a jsfiddle example

예

— 숀 베이더
소스
1

툴팁의 부트 스트랩 문서 에서

툴팁은 성능상의 이유로 옵트 인되므로 직접 초기화해야합니다. 페이지에서 모든 툴팁을 초기화하는 한 가지 방법은 data-toggle 속성으로 선택하는 것입니다.

  $('[data-toggle="tooltip"]').tooltip()
— 라힐 아마드
소스
0

data-toggle="tooltip"툴팁으로 원하는 요소를 추가하십시오 .

— Calum Childs
소스
0

다음을 수행해야합니다. 추가

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

페이지 어딘가에 (바람직하게는 <head>섹션에) 코드를 작성하십시오 .

또한 data-toggle: "tooltip"사용하려는 모든 항목에 추가 하십시오.

— Calum Childs
소스
0

Popper.js 를 사용할 수 있습니다

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

툴팁 기능을 호출하십시오.

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});
— 모센 뉴 토아
소스
-2

Bootstrap 툴팁 플러그인의 빠르고 가벼운 대안 :

HTML :

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS :

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT :

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

레이블 / 텍스트는 "mytooltip"클래스의 래퍼로 묶어야합니다.이 래퍼에는 ID가 있어야합니다.

레이블 뒤에는 "mytooltiptext"클래스의 div에 래핑 된 툴팁 텍스트와 부모 래퍼의 ID + "_tttext"로 구성된 id가 있습니다. 선택기의 다른 옵션을 사용할 수 있습니다.

도움이 되길 바랍니다.

— jdisla
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.