HTML-Element speichert Tags im rel-Attribut nicht

[mv_alex]

Hallo zusammen,

wenn ich wie hier beschrieben ein HTML-Element mit folgendem Inhalt anlege:

<a class="tooltip" title="Vergrößerte Darstellung der Seiteninhalte in Ihrem Webbrowser?" rel="Ist Ihnen die Darstellung des Inhaltes auf dieser Seite zu klein, dann können Sie in aktuellen Browsern (Firefox 3.6, Chrome, Safari, Opera, Internet Explorer ab Version 8) eine Vergrößerung durch folgende Tastenkombinationen erreichen:<br >
<strong>STRG +</strong> (Vergrößern)<br />
<strong>STRG -</strong> (Verkleinern)<br />
<strong>STRG 0</strong> (Null – wieder auf Standard zurücksetzen)<br /><br >
Die Kombination von gedrückter STRG-Taste und dem Bewegen des Scrollrads der Maus vergrößert oder verkleinert ebenso die Darstellungsgröße einer Website im Browserfenster.<br /><br />
Wenn Sie einen Apple Mac zum Surfen nutzen, verwenden Sie für die Tastenkombinationen die APFEL-Taste anstatt der STRG-Taste." tabindex="0">Darstellungsgröße + -</a>

löscht mir Contao nach dem Speichern innerhalb des rel-Attributs sämtliche spitze Klammern, sodass die HTML-Tags nicht mehr als Tags erkannt werden.

Kann ich das irgendwie umgehen?

Danke für jede Anregung!

Gruß Alex

[Andreas]

Warum löscht der das wohl? Weil Tags in Attributen nicht erlaubt sind! Das ist ein Fehler auf dieser hier-Seite.

Entweder du maskierst die spitzen Klammern
< => $lt; (lower than - kleiner als)
> => $gt; (greater than - größer als)

Oder du setzt den Tipp-Text mit der Option text oder mit der Methode setText() - beides wird hier beschrieben http://mootools.net/docs/more/Interface/Tips. Dann kannst du auch irgendein (verstecktes) HTML-Element als Tipp-Text nehmen.

[mv_alex]

Hallo Andreas,

vielen Dank für Deine Antwort.

Mir war nicht klar, dass Contao hier so streng auf Validität achtet. Das Maskieren funktioniert leider nicht, sondern wird im Klartext ausgegeben. Ich habe also versucht, das Template wie folgt anzupassen:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
    var myTips = new Tips($$('.tooltip'),
    {
        showDelay: 10,    //Verzögerung bei MouseOver
        hideDelay: 500,   //Verzögerung bei MouseOut
        className: 'tool', //CSS-Klassennamen --> CSS-Definitionen
        offsets: {'x': 50, 'y': -100 }, // Versatz des Tooltips
        // ab MooTools 1.3 wird offset ohne s verwendet.
        fixed: false, // false = Tooltip bewegt sich mit dem Mauszeiger, true=Tooltip bewegt sich nicht
        text: 'test',
    });
  
// zeigt den Tooltip bei Fokus an | ergänzt 02.01.2011

    $$('.tooltip').each(function(el) {
        el.addEvent('focus', function(event){
            myTips.elementEnter(event, el);
        }).addEvent('blur', function(event){
            myTips.elementLeave(event, el);
        });
    });
});
//--><!]]>
</script> 

Auch in unterschiedlichen Schreibweisen, da ich in JS nicht sonderlich erfahren bin. Aus dem HTML-Aufruf habe ich das rel-Atribut komplett entfernt.

Der Titel des Tooltips wird nun zwar angezeigt, der Textbereich bleibt jedoch leer. Muss ich doch auf die Methode setText() zurückgreifen?

Gruß Alex

[Andreas]

Der String für text kann nur ein Attribut des Anchors sein, also z.B. href, title usw.

Wenn du einen eigenen Text unterbringen möchtest kannst du das so machen:

var myTips = new Tips($$('.tooltip'), {
  showDelay: 10,
  hideDelay: 500,
  className: 'tool',
  offset: {
    x: 50,
    y: -100
  },
  fixed: false,
  text: function(){
    return 'mein Text';
  }
}

// oder

...
  text: function(){
    return myElement.get('html');
  }
... 

Letzteres habe ich nicht getestet. Evtl. reicht da auch nur return myElement; oder return myElement.get('text');

Achtung, offset nicht offsets.

In meinem Contao 3.2.9 hat der ACE-Editor für das HTML-Element die maskierten Klammern allerdings korrekt nach [lt] bzw. [gt] umgewandelt, so dass sie in der FE Ausgabe richtig als Entities erscheinen.

[mv_alex]

Letzteres scheint nicht zu funktionieren - oder ich hab's falsch eingebaut.

Aber folgende Variante funktioniert wunderbar:

        text: function(){
        return '<strong>mein<br />Text</strong>';
        }

Herzlichen Dank für Deine Hilfe!

Gruß Alex

[Andreas]

Ok, schön, dass es funzt.

Ich habe gerade mal die nicht getestete Variante getestet, das geht einwandfrei. Wahrscheinlich wusstest du nicht, was mit myElement gemeint war.

Hier mal ein paar Beispiele:

var myElement      = $('footer'); // Ein $-Zeichen - Rückgabe: Das Element mit der eingetragenen ID (hier footer)
var myFooter       = $$('#footer .indside'); // Zwei $-Zeichen - Rückgabe: Die Elemente, welche auf den CSS Selektor passen
var myArticles     = $$('.mod_article'); // alle Artikel
var myFirstArticle = $$('.mod_article .first'); // die ersten Artikel
var myFirstH1      = $$('.container h1')[0]; // [0] wählt nur die erste h1 in .container - [1] wäre die 2. h1
var myTip1         = $('tip_1'); // das Element mit der ID 'tip_1'

// Du kannst myElement am Anfang des Scripts mit var deklarieren und dann die Variable für text: benutzen. Oder bei text: direkt die/das Element/e holen.
...
text: function(){
  return myTip1;
},
...
text: function(){
  return $('tip_1');
},
... 

Es hat mir in meinem Test tatsächlich z.B. den kompletten Footer mit allem HTML in den tip_text gebracht.

Du könntest also ein Element erstellen für deinen Tipp-Text, ihm ne ID geben 'tip_1', mit CSS unsichtbar machen und dieses Element dann für den Tipp-Text holen.

[mv_alex]

Stimmt auffallend, das hatte ich nicht kapiert.

Konnte Deine Beispiele aber nun nachstellen. Eins funktioniert allerdings nicht: Wenn ich die ID "tip_1" via CSS auf unsichtbar setze, dann wird sie auch im Tooltip nicht angezeigt. Das scheint also nur mit sichtbaren Elementen auf diesem Weg zu funktionieren.

Gruß Alex

[Andreas]

Ok, habe ich nicht beachtet. Du kannst aber folgendes machen

#tip_1 {
  display: none;
}
.tool #tip_1 {
  display: block;
}

Wobei tool die Klasse deines Tooltipps ist.

[mv_alex]

Klasse, das klappt! Wusste gar nicht, dass man display:none nochmal überschreiben kann - dachte, das vererbt sich unwiderruflich weiter ...

Gruß Alex

[Andreas]

Nein, unwiderruflich vererbt sich nie etwas weiter.