[javascript] 부트 스트랩 3.0 팝 오버 및 툴팁

Program / 글쓴이

Bootstrap을 처음 사용하고 팝 오버 및 도구 설명 기능을 작동하는 데 문제가 있습니다. 드롭 다운과 모델에 문제가 없었지만 팝 오버와 툴팁에 뭔가 빠진 것 같습니다.

도구 설명이 표시되지만 부트 스트랩 예제처럼 스타일이 지정되지 않고 위치가 지정되지 않았습니다. 그리고 팝 오버가 전혀 작동하지 않습니다.

한 번 살펴보고 내가 무엇을 놓치고 있는지 알려주십시오.

       <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
        <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
        <link href="css/index.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
       <p id="tool"class="muted" style="margin-bottom: 0;">
        Tight pants next level keffiyeh
        <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
       <h3>Live demo</h3>
        <div style="padding-bottom: 24px;">
          <a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript">
            $(document).ready(function() {

                $('.tool').tooltip();
                $('.btn').popover();

            }); //END $(document).ready()

        </script>

        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>

      </body>

    </html>

답변

밝혀 에반 라슨이 가장 좋은 대답이있다 . 그의 답변에 찬성 (그리고 / 또는 정답으로 선택)하세요-훌륭합니다.

여기서 jsFiddle 작업

Evan의 트릭을 사용하면 한 줄의 코드로 모든 툴팁을 인스턴스화 할 수 있습니다.

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

긴 단락의 모든 도구 설명에 해당 한 줄만있는 작업 도구 설명이있는 것을 볼 수 있습니다.

jsFiddle 예제 (위 링크)에서도 기본적으로 하나의 툴팁 (로그인 버튼으로)이 켜져있는 상황을 추가했습니다. 또한 툴팁 코드는 HTML 마크 업이 아닌 jQuery의 버튼에 추가됩니다.

팝 오버 는 툴팁과 동일하게 작동합니다.

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

그리고 거기에 있습니다! 마침내 성공했습니다.

이 문제를 파악하는 데있어 가장 큰 문제 중 하나는 jsFiddle을 사용하여 부트 스트랩 작업을 수행하는 것이 었습니다. 다음은 수행해야하는 작업입니다.

  1. 여기에서 Twitter Bootstrap CDN에 대한 참조를 얻으십시오. http://www.bootstrapcdn.com/
  2. 각 링크를 메모장에 붙여넣고 URL을 제외한 모든 링크를 제거합니다. 예 :
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. jsFiddle의 왼쪽에서 외부 리소스 아코디언 드롭 다운을 엽니 다.
  4. 각 URL을 붙여넣고 붙여 넣을 때마다 더하기 기호를 누릅니다.
  5. 이제 “Frameworks & Extensions”아코디언 드롭 다운을 열고 jQuery 1.9.1 (또는 …)을 선택합니다.

이제 갈 준비가되었습니다.

답변

툴팁을 활성화하기 위해 내 모든 페이지에서 이것을 사용합니다.

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

답변

BOOTSTRAP 3 작업 : 짧고 간단

확인 -JS 바이올린

HTML

<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
</div>

자바 스크립트

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

답변

DOM이 준비된 상태에서해야했습니다.

$( document ).ready(function () { // this has to be done after the document has been rendered
    $("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips
    $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        'placement': 'top',
        'show': true
    });
});

로드 순서를 다음과 같이 변경하십시오.

  • jQuery
  • jQuery UI
  • 부트 스트랩

답변

어떤 이유로 코드를 작동시킬 수있는 유일한 방법은 몇 가지를 전환하는 것입니다. 지금까지 아무런 효과가 없다면 이것에 대한 소용돌이를주세요.

$('body').popover({
    selector: '[data-toggle="popover"]',
    trigger: 'hover',
    placement: 'right'
});

답변

스크립트에 구문 오류가 있으며 xXPhenom22Xx에서 언급 한대로 도구 설명을 인스턴스화해야합니다.

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

    }); //END $(document).ready()

</script>

“btn-danger”클래스를 사용했습니다. 다른 클래스를 만들거나 id="someidthatimakeup".

답변

툴팁을 활성화하기 만하면됩니다.

$('some id or class that you add to the above a tag').popover({
    trigger: "hover"
})