Link in tooltip einbauen

[pto]

Hallo, ich baue gerade das tooltip-Gestaltungstool "tooltipster" in meine Seite ein. Sie besteht aus sehr vielen links. Ich möchte jetzt, besonders für die mobile-devices den Link der Feeds per click im tooltip-title einbauen, so dass der User bei Trigger: Click zunächst den tooltip-content sieht und dann - wenn gewünscht - einen Link im tooltip-content findet, mit dem er dann den Link öffnet. Ich habe jedoch Probleme, den Link im content unterzubringen. Hier mein code:

  
    echo  
                    "<li class='ketchup tooltip' title='".  
                    htmlspecialchars (filtereHTML($desc), ENT_QUOTES).  
                    "...mehr'<a href='".  
                    htmlspecialchars($link, ENT_QUOTES).  
                    "' target='_blank'></a>".  
                    htmlspecialchars(filtereHTML($nachricht->title), ENT_QUOTES).  
                    "</li>\n";  
  

Erklärung: $desc enthält die feed-Description, die im tooltip untergebracht werden soll, nur soll am Ende angefügt werden "...mehr" verknüpft mit dem Link (der in $link steht) zur entsprechenden Originalseite (Der reine Überschriftstext steht in $nachricht->title).

Laut tooltipsterseite ist es ja möglich, solch einen Link im tooltip-content unterzubringen, aber die Anleitung für diese Option entdecke ich nicht auf der Seite.

Hier meine Testseite: testseite

Danke
Gruß
glupto

[Gunnar Bittersmann]

@@pto:

nuqneH

Q. Kann in Attributwerten Markup sein?

A. Nein.

Qapla'

[pto]

Q. Kann in Attributwerten Markup sein?

A. Nein.

Und wieso funktioniert es dann hier? tooltipster unter "Interaction with tooltips "?

[MudGuard]

Hi,

Und wieso funktioniert es dann hier? tooltipster unter "Interaction with tooltips "?

Weil dort der Tooltip nicht per title-Attribut erzeugt wird.

cu,
Andreas

[pto]

Weil dort der Tooltip nicht per title-Attribut erzeugt wird.

cu,
Andreas

Aber im Quelltext heißt es doch: ~~~html <span id="demo-interact" title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;">Hover</span> Interaction with tooltips
</li>

[1UnitedPower]

Meine Herren!

Weil dort der Tooltip nicht per title-Attribut erzeugt wird.

Das ist aber wirklich verwirrend, das title-Attribut hält in den Beispielen nämlich wirklich die Daten (inklusive HTML) die später angezeigt werden.

@pto: Die von dir verlinkte JavaScript Bibliothek merkt sich den Text, der in dem title-Attribut steht und löscht das Attribut dann. Damit unterbindet die Bibliothek die Standard-Anzeige der Browser. Anschließend wird eine ganz eigene Anzeige gebastelt, die natürlich auch HTML-Elemente benutzen kann.

Zur Veranschaulichung, aus diesem hier:
<span id="demo-interact" title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;">Hover</span>

macht die Bibliothek heimlich das hier:

<span id="demo-interact" class="tooltipstered">Hover</span>  
<!-- und später im Text -->  
<div class="tooltipster-base tooltipster-default tooltipster-fade tooltipster-fade-show">  
   <div class="tooltipster-content">  
      Try clicking <a href="http://google.com/" target="_blank">this link</a>  
   </div>  
</div>  

Ich habe das für die Leserlichkeit ein wenig angepasst.

[pto]

Zur Veranschaulichung, aus diesem hier:
<span id="demo-interact" title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;">Hover</span>

macht die Bibliothek heimlich das hier:

<span id="demo-interact" class="tooltipstered">Hover</span>

<!-- und später im Text -->
<div class="tooltipster-base tooltipster-default tooltipster-fade tooltipster-fade-show">
   <div class="tooltipster-content">
      Try clicking <a href="http://google.com/" target="_blank">this link</a>
   </div>
</div>

Danke erst einaml für die Aufklärung, hatte mich auch schon gewundert, wieso ich die id demo-interact nirgendwo im css dort gefunden hatte.  
  
Aber einen einfachen Weg, jetzt einen Link in einen Tooltip zu kriegen, siehst DU auch nicht, oder? Ich hatte ja mal bei tooltipster (github) nachgefragt und die meinten, alles stünde doch genau auf ihrer Seite und man müsse nur copy-paste beherrschen, das sehe ich aber nun wirklich nicht.  
  
Gruß  
pto

[ChrisB]

Hi,

Ich hatte ja mal bei tooltipster (github) nachgefragt und die meinten, alles stünde doch genau auf ihrer Seite und man müsse nur copy-paste beherrschen, das sehe ich aber nun wirklich nicht.

Es steht *exakt* dort, was erforderlich ist, um im title-Attribut enthaltenen (HTML-gerecht maskierten) HTML-Code als solchen darstellen zu lassen:

http://iamceege.github.io/tooltipster/, Abschnitt “4. Taking It a Step Further”

MfG ChrisB

[pto]

Es steht *exakt* dort, was erforderlich ist, um im title-Attribut enthaltenen (HTML-gerecht maskierten) HTML-Code als solchen darstellen zu lassen:

http://iamceege.github.io/tooltipster/, Abschnitt “4. Taking It a Step Further”

MfG ChrisB

Danke für die Antwort, dann muss ich nur noch sehen, wie ich js und php miteinander verknüpfe, worin ich keine Erfahrung habe, denn ich hole ja erstmal mit php das, womit ich dann das js-script "fülle" und dann würde ich es mit php und echo wieder ausgeben...(siehe mein php-code oben)...

[ChrisB]

Hi,

Danke für die Antwort, dann muss ich nur noch sehen, wie ich js und php miteinander verknüpfe, worin ich keine Erfahrung habe, denn ich hole ja erstmal mit php das, womit ich dann das js-script "fülle" und dann würde ich es mit php und echo wieder ausgeben...(siehe mein php-code oben)...

Du kannst doch deinen HTML-Code so, wie er derzeit bereits generiert wird, nutzen … da gibt es nichts weiter, was du noch groß „verbinden” müsstest.

MfG ChrisB

[pto]

Du kannst doch deinen HTML-Code so, wie er derzeit bereits generiert wird, nutzen … da gibt es nichts weiter, was du noch groß „verbinden” müsstest.

ALso, auf der tooltipster-Seite steht folgendes:

  
    <script>  
        $(document).ready(function() {  
            $('#my-tooltip').tooltipster({  
                content: $('<span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span>')  
            });  
        });  
    </script>  
</head>  
<body>  
  
    <div id="my-tooltip">  
        This div has a tooltip with HTML when you hover over it!  
    </div>  
	

Anders als in diesem Beispiel rufe ich eine PHP-Funktion auf, die aus einem rss-Feed einen link, eine description und ein title-element ausliest und in Variable packt, die müsste ich ja ins js packen, um dann in meiner Feed-Liste den jeweiligen tooltip inklusive Link zu bekommen (Hast Du Dir mal meine Seite angegückt?) Insofern fehlen mir da ein paar Zwischenstufen oder einfach etwas Verständnis, wie ich Variable an das script übergebe. Jedenfalls meine ich das mit "Verbinden".
Gruß
pto

[ChrisB]

Hi,

ALso, auf der tooltipster-Seite steht folgendes:

Und direkt *darunter* steht noch im gleichen Abschnitt exakt das beschrieben, was du vorhattest – den anzuzeigenden HTML-Code direkt im title-Attribut unterzubringen …

MfG ChrisB

[pto]

Hi,

ALso, auf der tooltipster-Seite steht folgendes:

Und direkt *darunter* steht noch im gleichen Abschnitt exakt das beschrieben, was du vorhattest – den anzuzeigenden HTML-Code direkt im title-Attribut unterzubringen …

MfG ChrisB

okay, danke, das habe ich mir nicht so genau angesehen, weil dort "Less recommended" stand. Habe jetzt    contentAsHTML: true    eingefügt, aber bisher noch keinen Erfolg erzielt.

[pto]

Also, ich habe jetzt beim tooltipster-script eingegeben:

contentAsHTML: true

Und meinen php-code, der den rss-feed-Text in eine Liste ausgibt, habe ich mehrfach verändert, ohne einen Erfolg, hier die letzte Variante:

  
 echo  
                    "<li class='tooltip' title='".  
                    htmlspecialchars (filtereHTML($desc), ENT_QUOTES).  
                    "   mehr<a href='".  
                    htmlspecialchars($link, ENT_QUOTES).  
                    "' target='_blank'></a>".  
                    htmlspecialchars(filtereHTML($nachricht->title), ENT_QUOTES).  
                    "</li>\n";

Es wäre nett, wenn mir jemand schreiben könnte, wo ich welche Veränderungen vornehmen sollte, damit der Link mit dem "...mehr" verknüpft im Tooltip erscheint.

Freundliche Grüße
pto

[Auge]

Hallo

Und meinen php-code, der den rss-feed-Text in eine Liste ausgibt, habe ich mehrfach verändert, ohne einen Erfolg, hier die letzte Variante:

echo

"<li class='tooltip' title='".
                    htmlspecialchars (filtereHTML($desc), ENT_QUOTES).
                    "   mehr<a href='".
                    htmlspecialchars($link, ENT_QUOTES).
                    "' target='_blank'></a>".
                    htmlspecialchars(filtereHTML($nachricht->title), ENT_QUOTES).
                    "</li>\n";

>   
> Es wäre nett, wenn mir jemand schreiben könnte, wo ich welche Veränderungen vornehmen sollte, damit der Link mit dem "...mehr" verknüpft im Tooltip erscheint.  
  
Bevor du dich weiter verirrst, wäre es eine sinnvolle Maßnahme, den Quelltext ohne PHP zusammenzustöpseln und zu testen. Was du uns hier schon mehrfach gezeigt hast, sieht als HTML nämlich folgendermaßen aus (für den mit PHP eingefügten text Kram eingefügt):  
  
`<li class='tooltip' title='Laber schwafel sülz   mehr<a href='pfad/zu/einer/Seite.html' target='_blank'></a>Nachrichtentitel</li>`{:.language-html}  
  
Das ist kaputt. Korrigiere und teste es in einer ausschließlichen HTML-Seite und überlege \*erst dann\*, wie und an welche Stellen du dort deine Texte per PHP einfügst.  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
  
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)

[pto]

Bevor du dich weiter verirrst, wäre es eine sinnvolle Maßnahme, den Quelltext ohne PHP zusammenzustöpseln und zu testen. Was du uns hier schon mehrfach gezeigt hast, sieht als HTML nämlich folgendermaßen aus (für den mit PHP eingefügten text Kram eingefügt):

<li class='tooltip' title='Laber schwafel sülz mehr<a href='pfad/zu/einer/Seite.html' target='_blank'></a>Nachrichtentitel</li>

Das ist kaputt. Korrigiere und teste es in einer ausschließlichen HTML-Seite und überlege *erst dann*, wie und an welche Stellen du dort deine Texte per PHP einfügst.

Danke, dass war schon mal ein Supertipp, immerhin habe ich es jetzt im HTML hingekriegt. Drück mir die Daumen, dass es auch beim PHP klappt.

[pto]

Bevor du dich weiter verirrst, wäre es eine sinnvolle Maßnahme, den Quelltext ohne PHP zusammenzustöpseln und zu testen. Was du uns hier schon mehrfach gezeigt hast, sieht als HTML nämlich folgendermaßen aus (für den mit PHP eingefügten text Kram eingefügt):

<li class='tooltip' title='Laber schwafel sülz mehr<a href='pfad/zu/einer/Seite.html' target='_blank'></a>Nachrichtentitel</li>

Das ist kaputt. Korrigiere und teste es in einer ausschließlichen HTML-Seite und überlege *erst dann*, wie und an welche Stellen du dort deine Texte per PHP einfügst.

Danke, dass war schon mal ein Supertipp, immerhin habe ich es jetzt im HTML hingekriegt. Drück mir die Daumen, dass es auch beim PHP klappt.

Tut mir leid, aber ich dreh bald durch, ich kriege es nicht hin. Ich habe es im HTML immerhin hinbekommen, aber die Umsetzung in PHP gelingt mir einfach nicht. Ich kriege den Link nicht in den tooltip. Ich glaube, es liegt an der Quote-Maskierung. ich habe im Grunde drei Ebenen. Die Quotes nach "echo", die Quotes, die den content von title umschließen und die darin, mit denen ich die href-Adresse und das _blank umschließe.
Also in HTML geht es so:
<li class="ketchup tooltip" title="Laber schwafel sülz ...><a href='http://de.euronews.com/' target='_blank'> mehr"</a>Nachrichtentitel</li>

Aber in PHP sieht es z. B. so aus:

   echo  
                    "<li class='ketchup tooltip' title='".  
                    htmlspecialchars (filtereHTML($desc), ENT_QUOTES).  
                    "><a href='".  
                    htmlspecialchars($link, ENT_QUOTES).  
                    "' target='_blank'>...mehr</a>".  
                    htmlspecialchars(filtereHTML($nachricht->title), ENT_QUOTES).  
                    "</li>\n";  

Das Ergebnis ist, dass dass "...mehr" im Nachrichtentitel landet" ..mehrAussteigerprogramm für Salafisten startet in NRW" und der tooltip-Inhalt endet mit dem ">" Ein Link ist aber weder im noch außerhalb des Tooltips in Sicht.

Zum Angucken nochmal: testseite
Gruß und Dank
pto

[Gunnar Bittersmann]

@@pto:

nuqneH

Ich glaube, es liegt an der Quote-Maskierung.

„Vorteilhaft ist es, in HTML die einen [Anführungszeichen und in Scriptsprachen wie JavaScript und PHP die anderen zu verwenden.]

Aber in PHP sieht es z. B. so aus:
echo "<li …

Und „dass man den HTML-Code (die HTML-Tags) gar nicht per echo generiert.“

Qapla'

[pto]

„Vorteilhaft ist es, in HTML die einen [Anführungszeichen und in Scriptsprachen wie JavaScript und PHP die anderen zu verwenden.]

Aber in PHP sieht es z. B. so aus:
echo "<li …

Und „dass man den HTML-Code (die HTML-Tags) gar nicht per echo generiert.“

Danke für die Antwort, aber meine Seite basiert darauf, dass ich mit php eine komplexere feedreader-Function aufrufe und die ausgelesenen feeds (nachricht->title), links und descriptions auch gleich mit echo ausgebe. Das muss doch auch gehen, oder?

Denn die function jetzt wieder "aufzubrechen", käme mir sehr kompliziert vor. Hier ist die Funktion Und so wird sie aufgerufen:

         <ul>  
          <?php  
  
verarbeiteFeed("http://www.br.de/nachrichten/meldungen/nachrichten-bayerischer-rundfunk100~newsRss.xml", "13");  
  
?>  
</ul>

Kann leider immer noch kein Klingonisch.

[pto]

Habe jetzt getreu Deinem Vorschlag folgendes gemacht:

                    <li class="tooltip" title="  
                    <?php echo htmlspecialchars (filtereHTML($desc), ENT_QUOTES); ?>  
                    <a href='  
                    <?php echo htmlspecialchars ($link, ENT_QUOTES); ?>  
                    ' target='_blank'>...mehr</a>"  
                    <?php echo htmlspecialchars (filtereHTML($nachricht->title), ENT_QUOTES); ?>  
                    </li>

Immerhin habe ich so den Link endlich in den tooltip bekommen, dafür wird $nachricht->title nicht mehr angezeigt. Sieht jemand, was ich falsch gemacht habe? Wenn ich vorher an anderer Stelle außerhalb der Liste
echo nachricht->title;

ausgebe, funktioniert es. Also steht was drin.

Danke für den HTML-Tip schon mal...

[pto]

Habs schon, es fehlte nur ein >

Danke noch mal

[pto]

Hallo, ich hab noch Probleme bei der Anpassung des tooltipster-Plugins. Ich möchte
1.) dass ich den tooltip mit "trigger: hover" aktiviere, er aber dann stehen bleibt, da ich im Innern des tooltips einen Link habe, den man anklicken können soll. Bisher bleibt der tooltip nur stehen, wenn ich "trigger:click" setze.
2.) ich möchte, dass der User denn tooltip manuell schließt, möglichst durch ein "Schließ-Kreuz" in einer Ecke des tooltips. Ich kenne mich aber mangels ausreichenden js-Kenntnissen nicht damit aus, die tooltipster-Anleitungumzusetzen. Ich habe es so versucht:

$(document).ready(function() {            $('.tooltip').tooltipster({   contentAsHTML: true,   autoclose: true,   animation: 'grow',   delay: 400,   theme: 'tooltipster-default',   touchDevices: true,   trigger: 'click',   interactive: true,   timer: '15'}); $(window).keypress(function() {      $('#example').tooltipster('hide');   });});

Erreicht werden sollte damit, dass sich der tooltip überhaupt wieder schließt, wenn der User auf das mobile-display tippt oder mit der Maus irgendwo auf die Seite klickt. Das klappt aber jetzt nur, wenn ein neuer tooltip aktiviert wird. Zum Anschauen:
testseite

Dank und Gruß
pto

[1UnitedPower]

Meine Herren!

Aber einen einfachen Weg, jetzt einen Link in einen Tooltip zu kriegen, siehst DU auch nicht, oder? Ich hatte ja mal bei tooltipster (github) nachgefragt und die meinten, alles stünde doch genau auf ihrer Seite und man müsse nur copy-paste beherrschen, das sehe ich aber nun wirklich nicht.

Da muss ich den Entwicklern zustimmen, auf ihrer Seite findet sich eine sehr ausführliche Schritt-für-Schritt-Anleitung mit ausreichend Beispielen. Ist das dein erster Kontakt mit JavaScript? Dann solltest du dich besser erst mit den Grundlagen vertraut machen.