Bootstrap 3.0 Popovers i tooltipy

84

Jestem nowy w Bootstrap i mam problemy z uruchomieniem funkcji popover i tooltip. Nie miałem problemu z listą rozwijaną i modelami, ale wydaje mi się, że brakuje mi czegoś do popovera i podpowiedzi.

Pojawiają się podpowiedzi, ale nie są one stylizowane i zlokalizowane jak przykłady bootstrap. A popover w ogóle nie działa.

Proszę spojrzeć i dać mi znać, czego mi brakuje.

       <!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>
javascript  jquery  css  twitter-bootstrap 
— user2560895
źródło
Właśnie opublikowałem to samo pytanie kilka minut temu, również używając BS3 ze wszystkim innym działającym jak modały i karty, ale bez podpowiedzi lub popoverów ... zaktualizuję cię, jeśli coś znajdę.
— xXPhenom22Xx
w przypadku popover opcje nie są zdefiniowane
— Cybermaxs
Na razie próbowałem uzyskać domyślne zachowanie, ale interesuje mnie, aby było wyświetlane po najechaniu kursorem zamiast kliknięciu, ale to było następne. Czy nadal muszę coś wkładać w opcje?
— user2560895
Powyższy kod jest tym, czego obecnie używam i nadal nie działa. Jakieś sugestie? Czy coś jest w złej kolejności czy coś?
— user2560895

Odpowiedzi:

147

Okazuje się, że Evan Larsen ma najlepszą odpowiedź . Zagłosuj za jego odpowiedź (i / lub zaznacz ją jako poprawną) - jest genialna.

Pracuję tutaj jsFiddle

Używając sztuczki Evana, możesz utworzyć instancję wszystkich podpowiedzi za pomocą jednej linii kodu:

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

Zobaczysz, że wszystkie podpowiedzi w twoim długim akapicie mają działające podpowiedzi tylko z tą jedną linią.

W przykładzie jsFiddle (link powyżej) dodałem również sytuację, w której jedna podpowiedź (przy przycisku Zaloguj) jest domyślnie WŁĄCZONA. Ponadto kod podpowiedzi jest DODAWANY do przycisku w jQuery, a nie w kodzie HTML.

Popovers zrobić działają tak samo jak podpowiedzi:

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

I masz to! Nareszcie sukces.

Jednym z największych problemów przy rozwiązywaniu tego problemu było sprawienie, aby bootstrap działał z jsFiddle ... Oto, co musisz zrobić:

  1. Uzyskaj odniesienie do usługi Twitter Bootstrap CDN tutaj: http://www.bootstrapcdn.com/
  2. Wklej każdy link do notatnika i usuń WSZYSTKIE oprócz adresu URL. Na przykład:
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. W jsFiddle, po lewej stronie, otwórz rozwijaną harmonijkę Zasoby zewnętrzne
  4. Wklej każdy adres URL, naciskając znak plus po każdym wklejeniu
  5. Teraz otwórz menu akordeonu „Struktury i rozszerzenia” i wybierz jQuery 1.9.1 (lub cokolwiek ...)

TERAZ jesteś gotowy do pracy.

— cssyphus
źródło
w jsFiddle, dlaczego wyzwalacz nie jest otoczony pojedynczymi cudzysłowami, ale umieszczenie jest?
— HPWD
Nie ma dobrego powodu, po prostu to przegapiłem. Ale wydaje się, że działa. Być może klucze
— jednowyrazowe
brzmi to dla mnie logicznie. Dzięki za wytłumaczenie.
— HPWD
4
to brzmi dla mnie jak bełkot. Ha! po prostu musiałem to powiedzieć;)
— Evan Larsen
Czy możesz zastosować tę metodę w odniesieniu do określonego pojemnika? Utworzenie wystąpienia wszystkich podpowiedzi lub popoverów w określonym kontenerze?
— Michael Ecklund,
231

Używam tego na wszystkich moich stronach, aby włączyć podpowiedź

$(function () { $("[data-toggle='tooltip']").tooltip(); });
— Evan Larsen
źródło
4
dzięki, ze wszystkich odpowiedzi, których udzieliłem, muszę powiedzieć, że prawdopodobnie spędziłem nad tym najmniej czasu. Ale w jakiś sposób przyznał najwięcej punktów.
— Evan Larsen,
Ale problem w tym. dla mnie nie działa z chrome. potem skończyło się na zrobieniu jakiejś rzeczy jsfiddle.net/arunpjohny/4HptX/4 z tego posta stackoverflow.com/questions/18372632/ ...
— Md. Salahuddin
@Md Salahuddin, więc teraz działa, po zaktualizowaniu jquery? Zadajesz pytanie, czy było to stwierdzenie?
— Evan Larsen,
1
To tylko oświadczenie. Zamiast tego użyłem jsfiddle.net/arunpjohny/4HptX/4, ponieważ ten kod nie działał z chrome w moim przypadku.
— Md. Salahuddin,
27

Praca z BOOTSTRAP 3: Krótka i prosta

Sprawdź - JS Fiddle

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>

Javascript

$(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
});
— Abhishek Goel
źródło
To nie zadziała, jeśli chcesz mieć funkcję przeskakiwania dla danych ładowanych asynchronicznie (ajax, angular itp.), Ale odpowiedź poniżej będzie.
— Adrian Hedley
6

Musiałem to zrobić na DOM gotowy

$( 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
    });
});

I zmień moje zamówienia na:

  • jQuery
  • jQuery UI
  • Bootstrap
— Jonathan
źródło
1
miałem podobny problem, ładowałem interfejs jquery po bootstrapie, twoja odpowiedź uświadomiła mi problem z tym.
— hubson bropa
sprawdź to dla popover, 1. Wyzwalanie Popoverów, 2. Pozycjonowanie Popoverów poprzez atrybuty danych
— shaijut
5

Z jakiegoś powodu jedynym sposobem, w jaki udało mi się uruchomić kod, jest zamiana kilku rzeczy. Jeśli do tej pory nic nie działało, daj się ponieść temu:

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});
— Święty
źródło
1
To jedyna rzecz, która zadziałała dla mnie, ponieważ element popover może nie być widoczny na początku. Dzięki!
— J. Titus
0

Masz błąd składniowy w swoim skrypcie i, jak zauważył xXPhenom22Xx, musisz utworzyć instancję podpowiedzi.

<script type="text/javascript">

    $(document).ready(function() {

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

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

</script>

Zauważ, że użyłem twojej klasy "btn-danger". Możesz utworzyć inną klasę lub użyć pliku id="someidthatimakeup".

— cssyphus
źródło
Myślę, że zmieniłem kod, aby pasował do tego, co zasugerowałeś. Nadal nie działa. Nie znam jeszcze Javascript, więc jest to trochę skomplikowane. Próbuję tylko uzyskać przykłady, które muszą działać w ten sam sposób.
— user2560895
Ten popover jest trochę trudny, ale mam podpowiedź, która działa jak powyżej.
— cssyphus
0

Wystarczy włączyć podpowiedź:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
— xXPhenom22Xx
źródło
Nie, to po prostu wyświetli sam popover, gdy najedziesz na niego kursorem, a nie etykietkę.
— CpnCrunch
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.