2016-04-21 10 views
0

Ich versuche, das folgende Verhalten auf einige font-awesome Symbole, die in einer Tabelle verwendet werden, zu erhalten.Popover auf <i> Elemente innerhalb einer Tabelle

Wenn Sie den Mauszeiger über das Symbol bewegen, wird ein Popover mit weiteren Informationen für den Benutzer angezeigt.

<head> 
    <meta charset="utf-8"> 
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> 
    <title>Test Page</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="css/search.css"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/box.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="css/footer.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> 

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

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/search.js"></script> 
    <!--[if lt IE 9]> 
    <script src="js/html5shiv.js"></script> 
    <script src="js/respond.min.js"></script> 
    <![endif]--> 
</head> 

Ich dachte, ich das Drehbuch richtig geladen hatte, aber es ist nicht die erwartete Antwort, wenn die Datei Live auf den Server gestellt wird (I geprüft bootstrap.js, tut es popover.js und tooltip.js umfassen . in der es als Codeabschnitte)

im Pastebin ist eine Version der Tabelle, wo ich die Mehrheit der Zeilen noch entfernt haben, während halten es sichtbar, was meine Absicht ist: http://pastebin.com/hYUBA711

(didn‘ Ich möchte es direkt einfügen, weil Tabellen immer viel Platz einnehmen, sogar diese kleine 4 Zeilen große, die re al-Tabelle ist 16 Zeilen)

Edit: seltsam genug, wenn ich es auf jsfiddle versuche es scheint zu arbeiten, wie ich vorhabe, aber die Live-Site nicht ... muss ein anderes Thema sein? Die JSFiddle http://jsfiddle.net/zmug2y2q

+0

Beitrag der Geige bitte ... Dank – JordanHendrix

+0

[http://jsfiddle.net/zmug2y2q](http://jsfiddle.net/zmug2y2q) – GeorgeWL

Antwort

1

Platzieren Sie Ihre jQuery-Code unter jquery.js und bootstrap.js:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/search.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('[data-toggle="popover"]').popover() 
    }); 
</script> 

hinzufügen ; am Ende Ihres jquery Code: https://learn.jquery.com/using-jquery-core/document-ready/

+0

Ha, um einfach einen fehlt in der Nähe – GeorgeWL

Verwandte Themen