Suche dynamische Tooltipplösung

Liebe/-r Experte/-in,
ich bin auf der Suche nach einer Tooltipplösung unter jquery.

Was will ich machen? Ich generiere mir aus einer Datenbank und php eine Seite.
Ein part jedes Datensatzes sind längere Texte Bis ca.500 Wörter.
Das ganze wird in einer Tabelle dargestellt und die Spalte text zeigt die ersten 40 Zeichen an, damit die nicht zu groß / unübersichtlich wird. Dahiter soll ein kleines Icon kommen. Beim Drüberfahren soll eine Seite Inhalt geöffnet werden, die je nach übergebener id den kompletten text anzeigt.

Auf der jquery Projektseite habe ich auch einen Tooltip gefunden. Allerdings scheint der nicht mit verschiedenen ids umgehen zu können.
Die Seite wird generiert und am Schluss hat der mir alle ids mit der letzten id überschrieben oder akzeptieren keine Variablen-Übergabe, da die Demos nur ein Bild anzeigen.


Text text text text text

Beim überfahren von mehr.gif soll halt die Seite inhalt.php?id=13 aufgerufen werden.
aus der Datenbank wird dann der ganze Text gezogen.
Danke für Tipps!
Oliver

Hallo Oliver,

Beim Drüberfahren soll eine Seite Inhalt geöffnet werden, die
je nach übergebener id den kompletten text anzeigt.

Wenn es um Tooltips geht, wieso soll dann eine Seite geöffnet werden? Was bedeutet „soll eine Seite Inhalt geöffnet werden“? Heißt die Seite „Inhalt“ oder meinst du eine „Seite mit Inhalt“?

Auf der jquery Projektseite habe ich auch einen Tooltip
gefunden. Allerdings scheint der nicht mit verschiedenen ids
umgehen zu können.

Meinst du einen Tooltip oder eine Tooltip-Lösung/Tooltip-Modul/Tooltip-Add-On? Kannst du eine Webadresse angeben, damit man sich überzeugen kann, ob das wirklich nicht damit umgehen kann?

Die Seite wird generiert und am Schluss hat der mir alle ids
mit der letzten id überschrieben oder akzeptieren keine
Variablen-Übergabe, da die Demos nur ein Bild anzeigen.

Das mit dem Überschreiben klingt nach dem bekannten Closure-Inside-Loop-Problem (siehe http://stackoverflow.com/questions/750486/javascript…). Vermutlich hast du es falsch eingebaut und nicht beachtet, dass JS keinen Block Scope hat.

Was du mit Variablen-Übergabe und der Bildanzeige meinst, ist unklar. Du solltest dich nicht auf Code oder Beispiele beziehen, die deinen potenziellen Helfern nicht zur Verfügung stehen.

Beim überfahren von mehr.gif soll halt die Seite
inhalt.php?id=13 aufgerufen werden.

Kann es sein, dass du zwar die URL „inhalt.php?id=13“ abrufen willst, sie aber nicht als Seite angezeigt werden soll, sondern über XHR geladen und mit ihrem Inhalt ein Tooltip gefüllt werden soll?

Viele Grüße,

Amica

Hi,
danke erstmal für die blitzschnelle Antwort!
Alsorl wird schwierig, da es zum einen local läuft und zumanderen habe ich die letzten tage soviel rum probiert, dass die Version längst wieder im Nirvana ist.

Also ich habe eine Seite indx.php. Auf dieser Seite wird eine tabelle generiert. In er letzen Zelle steht ua ein Bildchen (mehr.gif) und der Anfang eines längeren Textes. Beim drübefahren soll sich halt ein Fenster öffnen mit dem gesammten Text als Inhalt.

Die Seite habe ich einfach mal inhalt.php genannt.
Der text kommt aus einer Datenbank und hat demnach auch eine id.

Damit der Inhalt der Seite inhalt.php sich auch formatieren lässt, möchte ich html nutzen können::
Ein Codebeispiel fürdei Index.php ist in der Frage.
Die
inhalt.php

<?php $id=$_GET['id'];?> Beste Freizeitbeschäftigung

Lorem ipsum dolor sit amet consectetuer Morbi at consequat sed Ut. Nulla volutpat lacus Hallo Welt - <?php echo $id;?> - Hallo Werlt Curabitur risus vestibulum Fusce mus a at laoreet. Orci eros sed ut ullamcorper sed eu interdum In Cum magnis. Ut tristique sed lorem Ut eros Nunc Vivamus Ut odio eget. Elit laoreet sagittis tincidunt Morbi a a pretium ut id Phasellus. Turpis Sed ac et vitae orci wisi dignissim malesuada interdum justo. Cursus platea volutpat.

PS

Diese Seite hatte ich als Vorlage genommen.
http://jqueryui.com/tooltip/#custom-content
Da wird aber eine googleapi genommen und lediglich ein Bild angezeigt.
Gruß
Oliver

Alsorl wird schwierig, da es zum einen local läuft und
zumanderen habe ich die letzten tage soviel rum probiert, dass
die Version längst wieder im Nirvana ist.

Du solltest dir ein Versionierungssystem zulegen. Meine Empfehlung ist „git“, das kannst du auch ohne einen Server betreiben.

Also ich habe eine Seite indx.php. Auf dieser Seite wird eine
tabelle generiert. In er letzen Zelle steht ua ein Bildchen
(mehr.gif) und der Anfang eines längeren Textes. Beim
drübefahren soll sich halt ein Fenster öffnen mit dem
gesammten Text als Inhalt.

Das hatte ich schon verstanden, abgesehen davon, dass du immer wieder Verwirrung stiftest, weil du die Begriffe Fenster und Tooltip durcheinander wirfst.

Diese Seite hatte ich als Vorlage genommen.
http://jqueryui.com/tooltip/#custom-content

Dafür müsstest du einfach title-Attribute vergeben, was bedeutet, dass die Texte von Anfang an mit ins Dokument geschrieben werden müssten. Wenn du die vollständigen Texte aber nachträglich nachladen willst, nützt dir das nichts. Da brauchst du irgendetwas AJAXiges (ich hab mit jQuery nicht viel am Hut, daher kann ich dir dafür keine konkreten Tipps geben).

Da wird aber eine googleapi genommen und lediglich ein Bild angezeigt.

Ich seh weder irgendeine Google API noch ein Bild. Immer, wenn ich mal begriffen habe, was du zu meinen scheinst, haust du wieder irgendwas raus, was keiner versteht :wink:

Hallo,

Tooltips sind auch nur für die Darstellung kleiner Hinweise gedacht und kaum für längere Texte zu gebrauchen (in der Regel ist kein Scrolling vorgesehen). Zwei Vorschläge:

  1. Unter jeder Zeile der Tabelle eine versteckte Zeile einbauen, die über alle Spalten geht (colspan) und den gesamtem Text anzeigt. Die Zeile über einen Button oder Mouseover zum Bsp. mit jQuery.animate(1) ein-/ausblenden (ähnlich wie bei diesem Grid(2))

  2. Den gesamten Text in eine unsichtbare Spalte packen und auf Wunsch eine Dialogbox anzeigen, deren Inhalt aus der jeweilgen Tabellenzelle kommt und so sichtbar wird. Zum Bsp. mit jQueryUI(3)

(1)http://api.jquery.com/animate/
(2)http://www.jeasyui.com/tutorial/datagrid/datagrid22_…
(3)http://jqueryui.com/dialog/#animated

Hallo,
„springt“ die Tabelle dann nicht?

Gruß
Oliver

Guten Morgen,

auf der jquery Seite,stehen etliche Links. Und wenn man mit der maus üer London bzw. Vienna fährt wird ein Bild geladen. Im oberen J-Script steht irgendwas von www.google.com/api

Datenbank via ajax währe das sahnehäubchen. Vorher laden währe auch OK. So viele Daten sind es nicht.
Und jquery hatte ich genommen da es dort zahlreiche Addons gibt wie Datepicker.

Also mit tooltip meine ich nicht nur eine kleine Sprechblase, sondern eine komplette php-Seite, welche wie ein Tooltipp geladen wird.

http://screencast.com/t/tkR5DlhCwqZO

Zb diese Seite soll als Tooltipp geladen werden. Und da brauche ich halt eine Variable übergeben.

Ich hoffe es ist nun klarer was ich möchte.
Gruß
Oliver

Hallo,

> „springt“ die Tabelle dann nicht?

Beim 1. Vorschlag: Ja, siehe Link(2). Man kann es ja elegant herausgleiten lassen, dann hüpft es nicht so. Es passiert ja auch nur auf Wunsch. Wenn der Anwender den ganzen Text eigentlich immer sehen will, dann kann man ihn auch immer anzeigen (also garnicht erst verstecken).

Gruß,
Stefan

Hm, ich habe sowas mal gesehen. Prototype bzw.Mootools können sows. aber da ist der Rest Schrott.
Schöner fände ich wirklich einen erweiterten Tooltip.
Sowas. aber da wird nur ein Bild geladen und das Ganze wohl über alt gesteuert.
http://jqueryui.com/tooltip/#custom-content
und dann zB auf Vienna oder London.

Immer sehen soll der den Text gar nicht. Das ist schon nah dran.Nur will ich keine Bilder, sondern html-content und dazu muss ich eine Variable übergeben:

ZB
http://screencast.com/t/tkR5DlhCwqZO
Beste Grüße
Oliver

Datenbank via ajax währe das sahnehäubchen. Vorher laden währe
auch OK.

Du wirst um AJAX nicht drumherum kommen, denn…

Also mit tooltip meine ich nicht nur eine kleine Sprechblase,
sondern eine komplette php-Seite, welche wie ein Tooltipp
geladen wird.

eine komplettes HTML-Dokument kann man natürlich nicht in ein title-Attribut pressen.

Zwar kannst du die alle in einem versteckten Container am Ende des Hauptdokuments unterbringen und dann beim Hovern des zugehörigen Teaser-Texts sichtbar schalten, aber inzwischen denke ich, dass das Nachladen wohl doch sinnvoller ist.

Ich denke nur, du musst das selber bauen. Ob jQuery dafür Bordmittel hat, weiß ich nicht. Was du dafür auf jeden Fall brauchst, sind folgende Dinge:

  • Event-Listener auf der Teaser-Text-Zelle, der auf mouseover reagiert und Mauszeigerposition erfasst

  • XMLHttpRequest (kurz XHR), der die Verbindung zum Server aufbaut.

  • Event-Listener am XHR für readystatechange

  • Frei schwebenden (absolut positioniert, am Ende des body-Elements), anfangs versteckten Container, in den der Seiteninhalt reinkommt

  • Code zum Ermitteln des besten Ankers und Positionieren des Containers anhand der gespeicherten Mauszeigerposition und dem verfügbaren Platz

Beim letzten Punkt ist gemeint, dass du das Popup/Tooltip/wasauchimmer je nach verfügbarem Platz vom Mauszeiger aus entweder nach Nordost, Südost, Südwest oder Nordwest öffnest. Der Anker wird immer auf die Mausposition gesetzt, aber je nachdem, wo der Anker sich am Container befindet, erstreckt der Container sich in die jeweilige Richtung.

Mehr fällt mir dazu grad nicht ein.

Hi,
also, nach vilem probieren bin ich fast am Ziel:

  
$(function() {  
$( document ).tooltip({  
items: "img, [data-geo], [title]",  
content: function() {  
var element = $( this );  
if ( element.is( "[data-geo]" ) ) {  
var text = element.text();  
return "\<iframe src='inhalt.php?id="+text+"'\>";  
}  
if ( element.is( "[title]" ) ) {  
return element.attr( "title" );  
}  
if ( element.is( "img" ) ) {  
return element.attr( "alt" );  
}  
}  
});  
});  
  
  
 St. Stephen's Cathedral   
[Peep](inhalt.php?id=33)   
  
  
  
  
  
 Tower Bridge   
[London, England](http://maps.google.com/maps?q=london,+england&z=11)   
  
  
  
  

Übergibt mir schon mal den Text des Ankers an den Tooltip. Wie geagt ich bin kein Jscripti.

Hi,
also, nach vilem probieren bin ich fast am Ziel:

  
$(function() {  
$( document ).tooltip({  
items: "img, [data-geo], [title]",  
content: function() {  
var element = $( this );  
if ( element.is( "[data-geo]" ) ) {  
var text = element.text();  
return "\<iframe src='inhalt.php?id="+text+"'\>";  
}  
if ( element.is( "[title]" ) ) {  
return element.attr( "title" );  
}  
if ( element.is( "img" ) ) {  
return element.attr( "alt" );  
}  
}  
});  
});  
  
  
 St. Stephen's Cathedral   
[Peep](inhalt.php?id=33)   
  
  
  
  
  
 Tower Bridge   
[London, England](http://maps.google.com/maps?q=london,+england&z=11)   
  
  
  
  

Übergibt mir schon mal den Text des Ankers an den Tooltip. Wie geagt ich bin kein Jscripti.

Ich hatte auch versucht einfach das script xmal einzubauen, also für jede Zeile mit einem festen Übergabewert.

Hi,
wenns interessiert. Ich habe genau das gefunden, wass ich wollte:
Vorher:
http://screencast.com/t/sNOAV6YbBY

Nachher:
http://screencast.com/t/0x2HqFOoJ4jL

jQuery UI Tooltip - Custom content
.tooltip {
position: absolute;
display: none;
background-color: #FFaaaF;
width:250px;
padding:10px;
}

function showWMTT(id) {
wmtt = document.getElementById(id);
wmtt.style.display = „block“
}
document.onmousemove = updateWMTT;

function updateWMTT(e) {
if (wmtt != null && wmtt.style.display == ‚block‘) {
x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
wmtt.style.left = (x + 20) + „px“;
wmtt.style.top = (y + 20) + „px“;
}
}
function hideWMTT() {
wmtt.style.display = „none“;
}
Unser Link <?php $id=55;?>

Beste Freizeitbeschäftigung
Lorem ipsum dolor sit amet consectetuer Morbi at consequat sed Ut. Nulla volutpat lacus Hallo Welt - <?php echo $id;?> - Hallo Werlt Curabitur risus vestibulum Fusce mus a at laoreet. Orci eros sed ut ullamcorper sed eu interdum In Cum magnis. Ut tristique sed lorem Ut eros Nunc Vivamus Ut odio eget. Elit laoreet sagittis tincidunt Morbi a a pretium ut id Phasellus. Turpis Sed ac et vitae orci wisi dignissim malesuada interdum justo. Cursus platea volutpat.

EInfach fast nur über css gelöst.

Danke fürDeine Mühe
Oliver

Hi,
wenns interessiert. Ich habe genau das gefunden, wass ich wollte:
Vorher:
http://screencast.com/t/sNOAV6YbBY

Nachher:
http://screencast.com/t/0x2HqFOoJ4jL

jQuery UI Tooltip - Custom content
.tooltip {
position: absolute;
display: none;
background-color: #FFaaaF;
width:250px;
padding:10px;
}

function showWMTT(id) {
wmtt = document.getElementById(id);
wmtt.style.display = „block“
}
document.onmousemove = updateWMTT;

function updateWMTT(e) {
if (wmtt != null && wmtt.style.display == ‚block‘) {
x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
wmtt.style.left = (x + 20) + „px“;
wmtt.style.top = (y + 20) + „px“;
}
}
function hideWMTT() {
wmtt.style.display = „none“;
}
Unser Link <?php $id=55;?>

Beste Freizeitbeschäftigung
Lorem ipsum dolor sit amet consectetuer Morbi at consequat sed Ut. Nulla volutpat lacus Hallo Welt - <?php echo $id;?> - Hallo Werlt Curabitur risus vestibulum Fusce mus a at laoreet. Orci eros sed ut ullamcorper sed eu interdum In Cum magnis. Ut tristique sed lorem Ut eros Nunc Vivamus Ut odio eget. Elit laoreet sagittis tincidunt Morbi a a pretium ut id Phasellus. Turpis Sed ac et vitae orci wisi dignissim malesuada interdum justo. Cursus platea volutpat.

EInfach fast nur über css gelöst.

Danke fürDeine Mühe
Oliver

Hallo Oliver,

leider kenne ich mich nicht mit JQuery aus…

Wenn der Inhalt nur aus Text besteht könntest du jedoch
die vollständigen Texte in eine Span Element einbinden und im negativen Bereich (unsichtbar) mit laden.
Dadurch sparst du dir und der Benutzer sich die Wartezeit für das nachladen… Du musst dann nur noch den Text einblenden wenn du mit der Maus über das Symbol fährst, beim verlassen blendest du es wieder aus (verschiebst es in den unsichtbaren Bereich der Seite)

Viel Erfolg

Nicky

Hi Oliver,

ich nehme an, du meinst das jquery Tooltip Plugin:
http://docs.jquery.com/Plugins/Tooltip

Falls nicht - das wär nicht das schlechteste … :wink:

Dieses Plugin kann Tooltips in vielfältiger Weise erzeugen. Es kann aber nicht den Inhalt selbstständig holen, dafür musst du selber eine Callbackfunktion schreiben und diese bei den Tooltip-Options angeben.

Ich weiß nicht, ob du mit Ajax soweit vertraut bist, dass du den Content für den TT vom Server abrufen kannst (wofür die entsprechende ID in die Callbackfunktion reingereicht werden müsste).
Unabhängig davon kann es ein Problem sein, dass die Antwortzeit den Tooltip nur sehr träge aufpoppen lässt, und der User mit der Maus schon wieder ganz woanders ist.
Wäre es eine Option, den vollständigen Text bereits versteckt in der Seite einzubetten und für den Tooltip zu benutzen? Bei durchschnittlich 2000 Zeichen pro Record könntest du bis zu 50 Datensätze auf einer Seite anzeigen, ohne dass die Seite zu lahm wird, schätze ich. Und mehr ist ja wirklich nicht mehr übersichtlich, da solltest du dann lieber mit mehreren Seiten arbeiten.
Vorteil dieser Lösung wäre, dass du nur diese Seite mit PHP programmieren musst, nicht noch eine Antwortseite für die Ajax-Requests.
Etwa so:

Gekürzter Text ... Vollständiger Text

Am Ende der Seite Javascript:

$(".readmore").tooltip({ 
 bodyHandler: function() { 
 return $(this).parent().find(".fulltext").first().html();
 }, 
 showURL: false 
});

Das img braucht eine Dummy-Klasse (im Bsp. readmore), damit du den Tooltip-Handler simpel anflanschen kannst. Der span mit dem versteckten fulltext nur zur Sicherheit mit einer Dummy-Klasse zur Identifikation. Wenn du keine weiteren spans in der td hast, geht auch find(‚span‘).
Das this in dem BodyHandler ist das Objekt, das den tooltip auslöst, also das image mit der Klasse readmore.
Weitere Optionen, außer dem BodyHandler und showURL, kannst du nutzen um den Tooltip anzupassen (Position, Fading usw.).

Und im Seitenheader musst du natürlich jquery einbinden, und das Tooltip Plugin:
jquery.js
jquery.dimensions.js
jquery.tooltip.js

Ist nicht getestet… sollte aber so funktionieren.

Gruß
Thomas

Hi Thomas,
also nachdem ich nun tagelang rumprobiert hatte,
habe ich mich fü eine andere Lösung entschieden.
die wesentlich schlanker ist:
http://webmatze.de/ein-einfacher-cross-browser-toolt…

Der generiert mir im prinzip, wenn ich es richtig sehe einen div nach jedem tr und versteckt den. Beim hoover, macht der den sichtbar via css.

Kleines Problemchen noch:
Bei Tooltips in den Ecken des browserfensters, klappt der nicht um.
Und beim chrome bleibt der hängen.
Das heisst ich habe eine Tabelle mit vielen Zeilen. der Tipp steht über einem Bildchen in der letzten Spalte.
Bei den letzten Zeilen ist der tipp zu groß und steht aussehalb vom Bildschirm und ist damit nicht lesbar.
scrolle ich dann wieder rauf, kommt der Tooltip dann nicht wie vorher 20px neben er maus, sondern 200 oder 300px entfernt.
Aber nur im chrome.Der FF klappt zwar auch nicht um, aber da kommt der Tip aber immer eben der maus.

Mit umklappen meinte ich, wenn tooltipreite + xpos der maus > fensterbreite ist, zeige tooltipp links statt rechts. Gleiches bei ypos. wenn ypos +Länge des Tipps größer fensterbreite zeige tooltipp oben statt unten.

un ja aber ich denke damit kann ich leben. dann ist der chrome halt verboten.

Beste Grüße + Fettes dankeschön für deine Mühe
Oliver