jQuery Plugin sauber einbinden

**jogoto** · 09.12.2013, 21:59

Ich habe dieses jQuery Tooltip Plugin in Contao 3.1 eingebunden. CSS und JS liegen in tl_files, CSS ist über "Zusätzliche Stylesheets" eingebunden, JS über "Zusätzliche <head>-Tags"

Code:

<script src="tl_files/tooltipster/jquery.tooltipster.min.js"></script>

und aktiviert ist das Plugin über diese Angabe in "Eigener Java.Script-Code"

Code:

<script>
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
    </script>

Funktionieren tut alles, nur hätte ich das ganze etwas "schöner", also mehr ala Contao zum anklicken unter "jQuery-Templates". Nach einer Anleitung zu MooTools Tooltips habe ich eine j_tooltip.tpl mit dem Script-Code erstellt und in "templates" geladen. Im Backend habe ich das nun zum anklicken, bekomme aber eine Fehler beim Aufruf der Seite.
Wie muss ich das einbinden?

**Dirch** · 09.12.2013, 22:13

huhu,

spick einfach hier: https://contao.org/de/extension-list...ouchswipe.html

Ich denke das ist genau das was du suchst.

Beste Grüße...
...Dirk

die Templates heißen heute .xhtml oder html5

**jogoto** · 09.12.2013, 23:11

Vielen Dank,

ich hab es "kopiert", habe nun

/assets/jquery/tooltipster/jquery.tooltipster.min.js
/system/modules/jquery_tooltipster/config/autoload.php

Code:

<?php

/**
 * Contao Open Source CMS
 * 
 * Copyright (C) 2005-2013 Leo Feyer
 * 
 * @package   jquery_tooltipster
 */

/**
 * Register the templates
 */
TemplateLoader::addFiles(array
(
	'j_tooltipster' => 'system/modules/jquery_tooltipster/templates',
));

/system/modules/jquery_tooltipster/languages/de/module.php

Code:

<?php 

/**
 * Contao Open Source CMS
 * 
 * Copyright (C) 2005-2013 Leo Feyer
 * 
 * @package   jquery_tooltipster
 */


/**
 * Back end modules
 */
$GLOBALS['TL_LANG']['MOD']['jquery_tooltipster'][0] = 'jQuery ToolTipster Plugin';

/system/modules/jquery_tooltipster/templates/j_tooltipster.html5

Code:

<script type="text/javascript" src="<?php echo TL_ASSETS_URL; ?>assets/jquery/tooltipster/jquery.tooltipster.min.js"></script>

und kann es im Backend unter den Module sehen und unter den jQuery-Templates. Aber funktionieren tut es nicht. Erst wenn ich

Code:

<script>
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
    </script>

wieder unter "Eigener Java.Script-Code" einfüge geht es. Ich habe alle noch mal kontrolliert und stehe auf dem Schlauch.

**wulf** · 09.12.2013, 23:35

Dein template j_tooltipster müsste in etwas so ausssehen (ungetestet):

Code:

<script type="text/javascript" src="<?php echo TL_ASSETS_URL; ?>assets/jquery/tooltipster/jquery.tooltipster.min.js">
<script>
  (function($) {
    $(document).ready(function() {
    
            $('.tooltip').tooltipster();
       
    });
  })(jQuery);
</script>

Einfach mal in ein vorhandenes j_template, zb j_slider.html5 schauen und etwas basteln und testen

**jogoto** · 09.12.2013, 23:44

Danke, werde Deine Version nachher mal testen. Hatte es zwischenzeitlich zum laufen bekommen, in dem ich einfach den Teil mit rein kopiert habe:

Code:

<script type="text/javascript" src="<?php echo TL_ASSETS_URL; ?>assets/jquery/tooltipster/jquery.tooltipster.min.js"></script>
<script>
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
    </script>

Vermutlich nicht gerade sauber aber es geht.

**wulf** · 09.12.2013, 23:51

Code:

(function($) {

 })(jQuery);

ist die etwas sichere Methode, falls mal mootools mit eingebunden wird (stichwort: no-conflict)

**jogoto** · 10.12.2013, 00:08

Perfekt, danke!

**m-werk** · 17.12.2014, 11:31

Hallo, ich möchte dieses Thema nochmals aufgreifen:

Ich verwende Contao 3.4 und habe in meinem Seitenlayout unter zusätzliche <head>-Tags folgendes eingebaut:

Code:

<script type="text/javascript" src="files/js/jquery.tooltipster.min.js"></script>
<script>
        $(document).ready(function($) {
            $('.tooltip').tooltipster();
        })(jQuery);
    </script>

Weiters habe ich das tooltipster.css importiert und unter interne Stylesheets eingebunden.

Nun habe ich einen Artikel erstellt mit einem Texthinhalt und im html-Bereich sieht's so aus:

HTML-Code:

<div class="tooltip" title="test test test test">Test 1</div>

Leider tut sich nichs.

Kann mir hier jemand bitte unterstützen?

**joe** · 17.12.2014, 12:16

Schau dir mal http://ck2013.may17.de/javascript-einbinden.html an

Was sagt den die Developer Toolbar?

**m-werk** · 17.12.2014, 13:12

Die sagt mir jetzt gar nix. Es scheint so, als würde es gar nicht funktionieren.

Der Link ist jetzt mal richtig. Auch das CSS ist eingebunden. Mir verwundert nur, daß im CSS alles mit .tooltipster-default, .tooltipster-base usw. definiert ist.

LG, Andi

**m-werk** · 17.12.2014, 13:30

So, bin jetzt nochmals von ganz vorne alles durchgegangen.

Ich sehe jetzt zwar auch das Tooltip, aber nicht formatiert. Hmmmm

**m-werk** · 17.12.2014, 14:14

So, folgendes hab ich nun gemacht.

Ich hab ein neues Template angelegt "j_tooltipster.html5" und hab folgendes hineinkopiert:

Code:

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/tooltipster/jquery.tooltipster.min.js"></script>
<script>
$(document).ready(function($) {
            $('a[title]').tooltipster({
               positionTracker:true,
               animation: 'fade',
               delay: 200,
               touchDevices: false,
               trigger: 'hover',
               position: 'top',
               theme: 'tooltipster-shadow'
             });
        })(jQuery);
    </script>

Die Datei jquery.tooltipster.min.js habe ich in jenem Ordner hochgeladen, welcher auch im Script steht. (Wurde mehrmals überprüft)

Dann hab ich das dementsprechende CSS-File eingebunden in den Header-Tag, da ich es auch hochgeladen und geändert habe.

Ich bin nach dieser Anleitung herangegangen: >> hier <<

Im Artikel hab ich ein Element "hmtl" angelegt und folgendes hineingeschrieben:

HTML-Code:

<a href="#" title="Tooltip TEXT">Test 1</a>

Ich sehe zwar das Wort "Test 1" und wenn ich über das Wort fahre, auch "Tooltip TEXT" aber nicht in jener Form, wie oben bei der Anleitung. Ich sehe es ganz normal, wie wenn ich einen ganz normalen Link einfüge.

Was hab ich hier noch vergessen? Ich finde nichts mehr

**m-werk** · 17.12.2014, 14:31

Mensch, ich hab schon wieder nicht richtig geschaut. Der Scripte-Code war falsch!
Richtg:

Code:

<script>
(function($){
	$(document).ready(function() {
        $('a[title]').tooltipster({
          	positionTracker:true,
          	animation: 'fade',
            delay: 200,
            touchDevices: true,
            trigger: 'hover',
            position: 'right',
            theme: 'tooltipster-shadow'
        });
	});
})(jQuery);
</script>

Jetzt funktioniert es.