2016-06-12 18 views
0

Ich versuche, eine einfache qtip2 Demo laufen zu bekommen, aber es wird nicht funktionieren brauchen Hilfe. qtip2 ist ein Framework, mit dem Sie individuelle Tooltips erstellen können. Wenn Sie den Mauszeiger über den Link bewegen, sollte eine kleine gelbe Box erscheinen.Einfache qtip2 Beispiel funktioniert nicht

Alle Dateien befinden sich im selben Ordner.

<html> 
 
<head> 
 
<title>My site</title> 
 

 
<!-- CSS file --> 
 
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" /> 
 

 
</head> 
 
<body> 
 

 

 
<script type="text/javascript" src="jquery.min.js"></script> 
 

 

 
<script type="text/javascript" src="jquery.qtip.js"></script> 
 

 

 
<script type="text/javascript" src="jquery.imagesloaded.pkg.min.js"></script> 
 

 

 
<a href="#test" title="My tooltip text">Sample link</a> 
 

 
<script> 
 
// self executing function here 
 
(function() { 
 

 
    // your page initialization code here 
 
    // the DOM will be available here 
 
$('a[title]').qtip(); 
 
})(); 
 
</script> 
 

 
<a href="#test" title="My tooltip text">Sample link</a> 
 
</body> 
 
</html>

+0

gibt es Fehler in der Konsole? Ich schätze, die Quellen sind nicht richtig geladen ... – Jurudocs

+0

Gibt es eine Möglichkeit zu überprüfen, ob sie geladen sind? –

+0

In Ihrem Browser sind Entwicklerwerkzeuge verfügbar ... googeln Sie einfach. Oder schauen Sie in das Menü ... es sollte etwas wie Entwickler-Tools geben ... dann wird es ein kleines Fenster in Ihrem Browser und einen Tab namens Konsole geben ... dort klicken Sie auf und sehen happig Fehler – Jurudocs

Antwort

1

i unnessesary Codes wie die imagesloaded entfernt und ersetzen Sie die jQuery Link mit einem CDN Version.

Und es funktioniert.

<html> 
<head> 
<title>My site</title> 
<!-- CSS file --> 
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" /> 
</head> 

<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">   </script> 
<script type="text/javascript" src="jquery.qtip.js"></script> 
<a href="#test" title="My tooltip text">Sample link</a> 
<script> 
// self executing function here 
(function() { $('a[title]').qtip(); })(); </script> 
<a href="#test" title="My tooltip text">Sample link</a> 
</body> 
</html> 
+0

haha ​​Thaks zum Sammeln meiner Kirschen! ;-P – Jurudocs

+0

Froh, dass wir helfen konnten. –