Bootstrap 3.0 Popovers e tooltip

84

Sono nuovo in Bootstrap e ho problemi a far funzionare le funzioni popover e tooltip. Non ho avuto problemi con i drop down e i modelli ma mi sembra che manchi qualcosa per il popover e le descrizioni comandi.

Ricevo suggerimenti per la visualizzazione, ma non hanno lo stile e non si trovano come gli esempi di bootstrap. E il popover non funziona affatto.

Dai un'occhiata e fammi sapere cosa mi sto perdendo.

       <!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
fonte
Ho appena postato la stessa domanda pochi minuti fa, anche usando BS3 con tutto il resto che funziona come Modals e Tabs ma nessun Tooltips o Popover ... ti aggiornerò se dovessi trovare qualcosa.
— xXPhenom22Xx
per il popover, le opzioni non sono definite
— Cybermaxs
Per ora stavo solo cercando di ottenere il comportamento predefinito, ma sono interessato a farlo visualizzare al passaggio del mouse anziché al clic, ma quello era il prossimo. Devo ancora inserire qualcosa per le opzioni?
— user2560895
Il codice sopra è quello che sto utilizzando attualmente e non funziona ancora. Eventuali suggerimenti? Ho qualcosa nell'ordine sbagliato o qualcosa del genere?
— user2560895

Risposte:

147

Si scopre che Evan Larsen ha la risposta migliore . Si prega di votare la sua risposta (e / o selezionarla come risposta corretta): è geniale.

Lavorare jsFiddle qui

Usando il trucco di Evan, puoi istanziare tutti i suggerimenti con una riga di codice:

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

Vedrai che tutti i suggerimenti nel tuo paragrafo lungo hanno suggerimenti funzionanti con una sola riga.

Nell'esempio jsFiddle (collegamento sopra), ho anche aggiunto una situazione in cui un suggerimento (tramite il pulsante Accedi) è attivo per impostazione predefinita. Inoltre, il codice del tooltip è AGGIUNTO al pulsante in jQuery, non nel markup HTML.

Popovers fanno funzionare lo stesso come le descrizioni dei comandi:

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

E il gioco è fatto! Finalmente successo.

Uno dei maggiori problemi nel capire questa roba è stato far funzionare bootstrap con jsFiddle ... Ecco cosa devi fare:

  1. Ottieni riferimento per Twitter Bootstrap CDN da qui: http://www.bootstrapcdn.com/
  2. Incolla ogni collegamento nel blocco note e rimuovi TUTTO tranne l'URL. Ad esempio:
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. In jsFiddle, sul lato sinistro, apri il menu a discesa della fisarmonica Risorse esterne
  4. Incolla ogni URL, premendo il segno più dopo ogni incolla
  5. Ora, apri il menu a discesa della fisarmonica "Frameworks & Extensions" e seleziona jQuery 1.9.1 (o qualsiasi altro ...)

ORA sei pronto per partire.

— cssyphus
fonte
in jsFiddle, perché il trigger non è circondato da virgolette singole ma il posizionamento lo è?
— HPWD
Non c'è una buona ragione, l'ho semplicemente perso. Ma sembra funzionare. Forse le chiavi di una sola parola non hanno bisogno delle virgolette - a volte non sono richieste - tuttavia, di solito le inserisco.
— cssyphus
mi sembra logico. Grazie per il chiarimento.
— HPWD
4
che suona come incomprensibile per me. Ah! dovevo solo dirlo;)
— Evan Larsen
Puoi usare quel metodo nella relatività a un contenitore specifico? Istanziare tutti i tooltip o i popover all'interno di un contenitore specifico?
— Michael Ecklund
231

Lo uso su tutte le mie pagine per abilitare il tooltip

$(function () { $("[data-toggle='tooltip']").tooltip(); });
— Evan Larsen
fonte
4
grazie, tra tutte le risposte che ho dato dovrei dire che probabilmente ho passato meno tempo a questa. Ma ancora in qualche modo ha assegnato il maggior numero di punti.
— Evan Larsen
Ma il problema è. non funziona con Chrome per me. poi ho finito con il fare qualche cosa jsfiddle.net/arunpjohny/4HptX/4 da questo post stackoverflow.com/questions/18372632/...
— . Md Salahuddin
@Md Salahuddin, quindi ora funziona, una volta aggiornato il tuo jquery? Stai facendo una domanda o era una dichiarazione?
— Evan Larsen
1
È solo una dichiarazione. Ho usato jsfiddle.net/arunpjohny/4HptX/4 invece poiché questo codice non funzionava con Chrome per il mio caso.
— Md. Salahuddin
27

Lavorare con BOOTSTRAP 3: breve e semplice

Controllare - 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
fonte
Questo non funzionerà se si desidera avere la funzionalità pop-over per i dati che vengono caricati in modo asincrono (ajax, angolare ecc.) Ma la risposta di seguito lo farà.
— Adrian Hedley
6

Dovevo farlo su DOM pronto

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

E cambia i miei ordini di carico in modo che siano:

  • jQuery
  • jQuery UI
  • Bootstrap
— Jonathan
fonte
1
ho avuto un problema simile, stavo caricando jquery ui dopo il bootstrap, la tua risposta mi ha fatto capire il problema.
— hubson bropa
controlla questo per popover, 1. Attivazione dei popover, 2. Posizionamento dei popover tramite attributi di dati
— shaijut
5

Per qualche motivo l'unico modo in cui sono riuscito a far funzionare il mio codice è cambiare un paio di cose. Se finora niente ha funzionato per te, ti preghiamo di fare un giro a questo:

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});
— santa
fonte
1
Questa è l'unica cosa che ha funzionato per me poiché l'elemento popover potrebbe non essere in vista per cominciare. Grazie!
— J. Titus
0

Hai un errore di sintassi nello script e, come notato da xXPhenom22Xx, devi creare un'istanza del tooltip.

<script type="text/javascript">

    $(document).ready(function() {

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

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

</script>

Nota che ho usato la tua classe "btn-danger". Puoi creare una classe diversa o utilizzare un file id="someidthatimakeup".

— cssyphus
fonte
Ok ho cambiato il codice in modo che corrisponda a quello che hai suggerito, credo. Ancora non funziona. Non conosco ancora Javascript quindi questo è un po 'complicato. Sto solo cercando di far funzionare gli esempi che devono funzionare allo stesso modo.
— user2560895
Il popover è un po 'difficile ma ho ottenuto che il tooltip funzioni come sopra.
— cssyphus
0

Devi solo abilitare la descrizione comando:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
— xXPhenom22Xx
fonte
No, questo mostrerà solo il popover stesso quando ci passi sopra con il mouse, non il suggerimento.
— CpnCrunch
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.