nicht angemeldet
Tooltips für komplette Spalte setzten
Hallo Forum,
ich möchte bei einer Tabelle für jede Spalte einen Tooltip setzten (also genauer: alle Zellen einer Spalte haben immer den gleichen Tooltip). Bisher habe ich 3 Dinge versucht von denen 2 funktionieren (die ich aber aus weiter unten beschriebenen Gründen leider nicht nehmen kann) und die 3. Idee wäre die schönste aber die geht leider nicht.
1. "title=..."
Beschreibung: Bei jedem <th>- bzw. <td>-Tag mit "title=..."
den Tooltip setzen.
Beispiel:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th title="blablabla">h1</th>
<th>h2</th>
</tr>
<tr>
<td title="blablabla">1</td>
<td>2</td>
</tr>
<tr>
<td title="blablabla">1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
Status: Funktioniert.
Problem: Da ich sehr, sehr viele Zeilen und auch einen
sehr langen Tooltip habe wird dadurch der Traffic
beim Übertragen der Seite sehr groß und die Seiten
laden natürlich entsprechend langsam.
2. Javascript
Beschreibung: Hier im Forenarchiv (2002) habe ich eine Lösung
mit JavaScript gefunden die was änliches macht
und die ich auch erfolgreich modifiziert habe
(http://forum.de.selfhtml.org/archiv/2002/9/22830/#m126782).
Beispiel:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<head>
<title>Tabelle</title>
<script language="JavaScript" type="text/javascript">
<!--
st = "blablabla";
function tooltip() {
for (var i=0; i < document.getElementsByTagName("tr").length; i++) {
document.getElementsByTagName("tr")[i].getElementsByTagName("td")[2].title=(st);
}
}
-->
</script>
</head>
<body onload="tooltip()" style="word-spacing: 0; line-height: 100%; margin-top: 0; margin-bottom: 0">
<table width="100%" border="1" name="dokumente">
<tr>
<td title="">1</td>
<td title="">2</td>
<td title="">3</td>
</tr>
<tr>
<td title="">a</td>
<td title="">b</td>
<td title=""> </td>
</tr>
</table>
</body>
</html>
Status: Funktioniert fast.
Problem: Ich habe leider die Vorgabe kein JavaScript zu
verwenden und bei leeren Zellen ( ) kommt
kein Tooltip wohingegen bei Lösung 1 einer kommt
wenn ich eine Zelle leer lasse? => ist aber wie
gesagt nicht das Problem da ich sowieso kein
JScript nehmen darf.
3. colgroup
Beschreibung: In der colgroup (bzw. natülrich bei col)
den title setzten damit sich dieser auf
die ganze Spalte auswirkt
Status: Geht nicht
Problem: bei col ist wohl nur colspan und width erlaubt
Gibt es vielleicht eine Lösung die rein HTML-basiert ist? Ich habe mir schon überlegt dass sowas mit CSS vielleicht gehen müsste habe aber noch nie was mit CSS gemacht? Falls das mit CSS geht reicht mir da ein kurzer Tip wie etwa dann kann ich selbst weitersuchen aber ich hab keine Ahnung wie ich mit CSS rangehen könnte.
Danke schon im Voraus. Ist ein langes Posting aber ich hoffe Ihr merkt dass ich selbst schon einiges versucht habe und mit meinem Latein aber leider am Ende bin.
Ciao
Thomas Grötzner
-
moin Thomas,
kannst Du php verwenden? dann schlage ich ein include einer txt-datei vor. in diese kommt der tooltip-text. und in die php-datei z.b.
<th title="<?php include ("tooltip.txt"); ?>">vielleicht hilfts
FaB
-
Hallo FaB,
kannst Du php verwenden? dann schlage ich ein include einer txt-datei vor. in diese kommt der tooltip-text. und in die php-datei z.b.
<th title="<?php include ("tooltip.txt"); ?>">Nein, php geht nicht. Ich schreibe ASP im IIS mit VbScript da würde das aber ähnlich gehen. Mit Deinem Vorschlag bin ich dann aber im Prinzip bei meiner Lösung 1 da php bzw. ASP ja auf dem SERVER ausgeführt wird und somit an den CLIENT im Prinzip Lösung 1 übertragen wird.
Das Problem wenn das title-Attribut eben bei jedem einzelnen Zell-Tag gesetzt wird ist die Größe des übertragenen HTML-Files! Ich kann den File um geschätzt 60%-65% verkleinern wenn ich es schaffe den Text jeweils nur 1 mal zu hinterlegen (wie z.B. bei meinem Lösungsversuch Nr. 2 mit der JScript-Variante). Da wird der Text nur 1 mal vom Server zum Client übertragen und dann beim Client aufgelöst was deutlich schneller geht. 60% sind eben einiges und das Laden meiner Seiten würde dadurch schon ziemlich beschleunigt.
Der Grund für den ganzen Act ist der dass die Tooltips leider sein müssen und dass auf die Seiten aber auch oft per Modem zugegriffen wird und da sind bei einer Seite z.B. 300-400kb statt 1000kb schon ein Gewinn für den sich etwas Aufwand lohnt (wie schon in der Anfrage gesagt: ich habe sehr viele Zeilen).
Funktionieren tut es aktuell mit Lösung 1 schon aber ich will eben die Performance erhöhen.
Ciao
Thomas Grötzner-
Hallo,
Funktionieren tut es aktuell mit Lösung 1 schon aber ich will eben die Performance erhöhen.
Prinzipiell unmöglich ist es nicht, da das Attribut title sowohl in colspan als auch in col vorgesehen ist. Nur interpretiert es eben noch keiner der Browser. Du wirst also mit der Lösung 1 leben müssen, bis die häufigsten Browser wirklich _alle_ vom W3C vorgesehenen Standards umsetzen, *ähm* bis zum Sankt Nimmerleinstag also ;-))
viele Grüße
Axel
-
Prinzipiell unmöglich ist es nicht, da das Attribut title sowohl in colspan als auch in col vorgesehen ist. Nur interpretiert es eben noch keiner der Browser.
Hallo Alex,
könnte man vielleicht in CSS für die <th> und <tr> Tags das Attribut titel definieren? Ich glaube ich versuch das jetzt einfach mal und poste dann das Ergebnis meines Versuchs.
Ciao
Thomas Grötzner-
Hallo,
Hallo Alex,
xel,
könnte man vielleicht in CSS für die <th> und <tr> Tags das Attribut titel definieren? Ich glaube ich versuch das jetzt einfach mal und poste dann das Ergebnis meines Versuchs.
CSS kann keine Attribute definieren. Die werden in der DTD definiert. Da, in der DTD für HTML4.01, steht title für colgroup und col allerdings schon drin. Du müsstest einen Browser schreiben, der das umsetzt ;-))
CSS ist zum Formatieren der HTML-Elemente gedacht. Es kann alleine keine neuen Elemente erzeugen. Es kann höchstens, per :hover, vorhandene Elemente einblenden. Dazu müssten diese dann aber auch in jeder Zelle vorhanden sein.
viele Grüße
Axel
-
Sorry A>XEL<,
könnte man vielleicht in CSS für die <th> und <tr> Tags das Attribut titel definieren? Ich glaube ich versuch das jetzt einfach mal und poste dann das Ergebnis meines Versuchs.
Habs probiert und war leider erfolglos. Im Prinzip ist CSS ja gar nicht so schwer. Zumindest hab ich die Farbe auf Anhieb hingekriegt aber lt. Doku gibt es wohl nichts für das title-Attribut (hab die Doku von http://www.style-sheets.de/ verwendet).
<html>
<head>
<link REL="stylesheet" TYPE="text/css" href="tooltip.css">
</head>
<body>
<table border="1">
<tr>
<td class="tooltip">
1
</td>
</tr>
</table>
</body>
</html>Hier das css:
td{}
.Tooltip{title:"Hallo"} <== kommt leider nicht an ;-(
.Tooltip{color:"red"}Werde also mal versuchen ob ich nicht doch JScript verwenden darf ;-)
Ciao und danke für eure Zeit
Thomas Grötzner-
Hallo Thomas,
Habs probiert und war leider erfolglos. Im Prinzip ist CSS ja gar nicht so schwer. Zumindest hab ich die Farbe auf Anhieb hingekriegt aber lt. Doku gibt es wohl nichts für das title-Attribut (hab die Doku von http://www.style-sheets.de/ verwendet).
Hier das css:
td{}
.Tooltip{title:"Hallo"} <== kommt leider nicht an ;-(
.Tooltip{color:"red"}Naja. Schau nochmal bei http://selfhtml.teamone.de/css/index.htm vorbei.
td.Tooltip{title:"Hallo"}
Das kann nicht gehen; title ist ein Attribut, keine Style-Eigenschaft.td.Tooltip{color:red;}
Die Style-Eigenschaft color heißt nur so, wie das Attribut color bei <font color="red">. Beides hat miteinander nichts zu tun.Werde also mal versuchen ob ich nicht doch JScript verwenden darf ;-)
Nein! Nicht, wenn es wichtig ist. Würde nicht eine einfache Spaltenüberschrift reichen?
viele Grüße
Axel
-
Hallo Axel,
Werde also mal versuchen ob ich nicht doch JScript verwenden darf ;-)
Nein! Nicht, wenn es wichtig ist. Würde nicht eine einfache Spaltenüberschrift reichen?Was für einen Grund gibt es das folgende JScript nicht zu verwenden?
Es soll explizit ein Tooltip sein. Ist ja wie gesagt auch schon (seit längerem) mit dem title-Attribut realisiert nur sind dadurch eben die Seiten extrem gross. Die Seiten sollen an sich unverändert bleiben (nach aussen hin!) nur sollen sie eben deutlich kleiner werden!
wird im body bei onload ausgeführt (hier hänge ich testhalber noch immer den Zellinhalt an den Tooltip ran, das ist in echt mal nicht so)
<script language="JavaScript" type="text/javascript">
<!--
index = 2
st = "Juhu";
function tooltip() {
var trs = document.getElementsByTagName("tr");
for (var i=0; i < trs.length; i++) {
var tds = trs[i].getElementsByTagName("td");
if (tds.length > index) {
var cellValue = tds[index].firstChild.data;
tds[index].title=(st + "/" + cellValue);
} else {
var ths = trs[i].getElementsByTagName("th");
if (ths.length > index) {
var cellValue = ths[index].firstChild.data
ths[index].title=(st + "/" + cellValue);
}
}
}
}
-->
</script>Ciao
Thomas Grötzner-
Hallo Thomas,
Werde also mal versuchen ob ich nicht doch JScript verwenden darf ;-)
Nein! Nicht, wenn es wichtig ist. Würde nicht eine einfache Spaltenüberschrift reichen?
Was für einen Grund gibt es das folgende JScript nicht zu verwenden?Nur einen: Wer JavaScript deaktiviert hat, bekommt nichts angezeigt.
wird im body bei onload ausgeführt (hier hänge ich testhalber noch immer den Zellinhalt an den Tooltip ran, das ist in echt mal nicht so)
<script language="JavaScript" type="text/javascript">
<!--
index = 2
st = "Juhu";
function tooltip() {
var trs = document.getElementsByTagName("tr");
for (var i=0; i < trs.length; i++) {
var tds = trs[i].getElementsByTagName("td");
if (tds.length > index) {
var cellValue = tds[index].firstChild.data;
tds[index].title=(st + "/" + cellValue);
} else {
var ths = trs[i].getElementsByTagName("th");
if (ths.length > index) {
var cellValue = ths[index].firstChild.data
ths[index].title=(st + "/" + cellValue);
}
}
}
}
-->
</script>Ähm, hast Du mal ausprobiert, ob das _wirklich_ schneller geht, als die Übertragung der entsprechenden Anzahl title="Juhu blah..."?
Mein Tipp: Es ist nicht schneller ;-))
viele Grüße
Axel
-
Hallo Axel,
Nur einen: Wer JavaScript deaktiviert hat, bekommt nichts angezeigt.
Ich trau es mich fast nicht zu sagen aber es ist sicher gestellt, dass die Software nur auf IE 5.x und 6.x laufen wird und der bisher einzige Grund gegen JScript war die Wartung (bisher hat sich keiner mit JScript beschäftigt). Es handelt sich um ein Produkt das nur Company-Intern verwendet wird und da ist sichergestellt dass JScript aktiviert ist.
Ähm, hast Du mal ausprobiert, ob das _wirklich_ schneller geht, als die Übertragung der entsprechenden Anzahl title="Juhu blah..."?
Mein Tipp: Es ist nicht schneller ;-))
Hab ich noch nicht probiert! Ich übertrage ja aber nicht "Juhu blah..." sondern da kommen als Tooltip schon so 200 Zeichen und es handelt sich um Modemverbindungen die idR. mit 4x oder max. 5x kBit verbunden sind. da kann ich bei Reports bei denen ich wirklich so 500 kb Download spare lange auf dem Client in JavaScript rödeln.
Performance-Messungen mach ich auf jeden Fall noch kann ich aber natürlich erst machen wenn ich das ins Produkt integriert habe was demnächst der Fall ist. Ich post das Erg. der Zeitmessung dann hier.
Ciao
Thomas Grötzner
----------------------
ich muss mir langsam auch mal ne Signatur ausdenken ;-)
-
-
-
-
-
-
-
-
-
-
Hi,
- colgroup
Beschreibung: In der colgroup (bzw. natülrich bei col)
den title setzten damit sich dieser auf
die ganze Spalte auswirktStatus: Geht nicht
Problem: bei col ist wohl nur colspan und width erlaubt
Falsche Schlußfolgerung, nur weil es in Deinem Browser nicht klappt, heißt das noch lange nicht, daß es nicht erlaubt wäre.
col und colgroup erlauben durchaus das title-Attribut.
Sieht man hier:
<!ATTLIST COL -- column groups and properties --
%attrs; -- %coreattrs, %i18n, %events --
span NUMBER 1 -- COL attributes affect N columns --
width %MultiLength; #IMPLIED -- column width specification --
%cellhalign; -- horizontal alignment in cells --
%cellvalign; -- vertical alignment in cells --
>bzw. für Colgroup auch:
<!ATTLIST COLGROUP
%attrs; -- %coreattrs, %i18n, %events --
span NUMBER 1 -- default number of columns in group --
width %MultiLength; #IMPLIED -- default width for enclosed COLs --
%cellhalign; -- horizontal alignment in cells --
%cellvalign; -- vertical alignment in cells --
>Hier noch die weitere Auflösung von %attrs;
<!ENTITY % attrs "%coreattrs; %i18n; %events;">
<!ENTITY % coreattrs
"id ID #IMPLIED -- document-wide unique id --
class CDATA #IMPLIED -- space-separated list of classes --
style %StyleSheet; #IMPLIED -- associated style info --
title %Text; #IMPLIED -- advisory title --"
>Und siehe da, title ist sowohl in col als auch in colgroup erlaubt.
Mit welchen Browsern hast Du denn getestet?Gibt es vielleicht eine Lösung die rein HTML-basiert ist? Ich habe mir schon überlegt dass sowas mit CSS vielleicht gehen müsste habe aber noch nie was mit CSS gemacht? Falls das mit CSS geht reicht mir da ein kurzer Tip wie etwa dann kann ich selbst weitersuchen aber ich hab keine Ahnung wie ich mit CSS rangehen könnte.
Wenn die Information so wichtig ist, sollte sie m.E. sowieso nicht als Tooltip angezeigt werden, sondern eher als eigene Zeile (th).
Ansonsten: serverseitig reingenerieren.
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/