Perché il mio popover Bootstrap non funziona?

Sto provando a utilizzare lo Bootstrap popover. Così ho copiato il codice esatto dell'esempio nel mio sito web, che purtroppo non funziona. Ho incollato il codice completo qui sotto e creato a jsfiddle here.Perché il mio popover Bootstrap non funziona?

Ho provato a metterlo in un contenitore di bootstrap e in righe e colonne, ma nulla sembra funzionare.

Qualcuno come posso far funzionare quel violino? Tutti i suggerimenti sono ben accetti!

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
</head> 
<body> 
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> 
</body> 
</html>

fonte

2015-05-05 kramer65

@Gunaseelan non è necessario se si include 'bootstrap.min.js' come OP. –

Ho aggiornato la demo di JSFiddle per includere jQuery, poiché in caso contrario si trattava di un errore relativo alla mancanza di jQuery (nonostante fosse presente nello snippet). –

LOL, 6 risposte in 10 minuti circa la stessa cosa: '$ ('[data-toggle =" popover "]'). Popover()' –

avete dimenticato questo: http://getbootstrap.com/javascript/#opt-in-functionality

Per motivi di prestazioni, il tooltip e Popover data-API sono opt-in, significa che è necessario inizializzare da soli.

Un modo per inizializzare tutte le descrizioni dei comandi su una pagina sarebbe quella di selezionare dal loro attributo data-ginocchiera:

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

fonte

2015-05-05 11:15:42 Seblor

Poiché questa è l'unica risposta che collega e cita la fonte, + 1 a voi. –

È necessario aggiungere questo code in <head>

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

fonte

2015-05-05 11:11:05 khurram

è possibile aggiungere un attributo id o class nel button e poi chiamare il metodo popover su tale pulsante. Ecco il violino funzionante. http://jsfiddle.net/uqLor9ze/.

Ecco il codice di esempio da fiddle

$('#pop').popover();

fonte

2015-05-05 11:11:52 Kamran

dovrebbe aggiungere l'esempio

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

lavoro here

fonte

2015-05-05 11:12:00 vamsikrishnamannem

Per ragioni di prestazioni si dovrebbe initilize popover da soli:

<script> 
$(function() { 
    $('[data-toggle="popover"]').popover() 
}) 
</script>

Reference

Assicurarsi di aggiungere la libreria jQuery prima del bootstrap.

jsFiddle

fonte

2015-05-05 11:12:45 jmgross

ti mancava chiamata di funzione nella libreria violino e jQuery mancava anche

ho aggiunto dipendenze mancanti nel vostro esempio

controllo violino:https://jsfiddle.net/L41g98qx/9/

Ecco una funzione chiamata popover

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

Di seguito testo viene copiato da getbootstrap.com, qui è quello che vogliono dire circa il plugin popover

Opt-in funzionalità

Per motivi di prestazioni, il tooltip e Popover data-API sono opt-in, cioè li si deve inizializzare te stesso.

Un modo per inizializzare tutti popovers su una pagina sarebbe selezionarli dal loro attributo data-ginocchiera: Copy

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

fonte

2015-05-05 11:16:04

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" id="example">Dismissible popover</a>

Questo metodo è richiesto

$('#example').popover('show');

DEMO

fonte

2015-05-05 11:20:21 sheshadri

Perché il mio popover Bootstrap non funziona?

risposta

Problemi correlati