# PHP- CSS -Tooltips wie ?



## dadsen (22. März 2009)

Ich gebe mit PHP Text aus einer Datenbank an den Browser in eine Tabelle aus und erzeuge sie gleichzeitig:
z.B. echo "<td width =\"330\" bgcolor=\"\" title= \"$string2\" >$gericht2</td>"

Hier wird die Tabellenzeile erzeugt, mit title " " wird der Inhalt von $string2 als title angezeigt wenn sich der Cursor auf der Zeile von $gericht2 befindet.

Nun ist es möglich dass in $string2 Zeichen enthalten sind, die damit nicht angezeigt werden können (z.B Hochzahlen.)

Wie kann ich aus $string2 trotzdem so etwas wie einen Tooltip erzeugen der das Gleiche erzeugt, nämlich $string2 anzeigt wenn sich der Cursor auf der Tabellenzeile befindet und das mit CSS. z.B. webbe.de CSS Tooltips?

Die CSS-Konstruktion kann ich in etwas nachvollziehen, (a: hoover....)aber wie ist denn die Einbettung in HTML ? Wieso und womit entsteht denn ein Tooltip mit Rahmen...usw.

Mit meinem learning by doing-Latein stoße ich hier an Grenzen.

JS-Tooltips möchte ich ungern verwenden, denn es könnte ja ausgeschltet sein oder es sind zu viele Variable, die ich von HP an JS zu übergeben hätte.

danke für eure ratschläge - dadsen


----------



## Maik (22. März 2009)

Hi,

der HTML-Code für einen CSS-Tooltip basiert auf einem Eltern- und Kindelement:


```
<td width =\"330\" bgcolor=\"\"><a href=\"#\" class=\"tooltip\">$gericht2<span>$string2</span></a></td>
```


http://www.brunildo.org/test/#pop

mfg Maik


----------



## dadsen (23. März 2009)

@Maik
habe es ausprobiert. Der Text $gericht2 ist blau und wird unterstrichen bei hover und die Backgroundfarbe ändert sich, mehr nicht, auch keine Tooltip 

entschuldigung-der grünschnabel dadsen


----------



## Maik (23. März 2009)

Da du es versäumt hast, den CSS-Code deines Versuchs zu zeigen, damit man darauf auch näher eingehen kann, poste ich einfach mal einen funktionstüchtigen Code, mit dem der "Text" nicht unterstrichen und in blauer Schriftfarbe dargestellt wird (beides ist die Browser-Voreinstellung für Links):


```
<a href="#" class="tooltip">$gericht2<span>$string2</span></a>
```


```
a.tooltip:link, a.tooltip:visited {
    text-decoration:none;
    color:#000;
}
a.tooltip:hover {
    background:#ffff00; 
}
a.tooltip span {
    visibility:hidden;
    position:absolute;
}
a.tooltip:hover span {
    visibility:visible;
}
```

mfg Maik


----------



## dadsen (24. März 2009)

@Maik

ich getraue mich nochmal etwas anzufragen. habe deine CSS-befehle benutzt, vorher waren es die befehle aus ohne-css.gehts-gar.net

Es werden keine tooltips generiert ! Nur der Mauszeiger Ändert sich von Pfeil auf einens enkrechten Strich wenn man mit der Maus  über de zeile fährt.

dadsen


----------



## Maik (24. März 2009)

Solange du  hier keine Einsicht in deinen Quellcode gewährst, kann dir auch nicht geholfen werden 

mfg Maik


----------



## dadsen (24. März 2009)

Entschuldigung Maik, habe doch keine geheimnisse
PHP:

```
$i = 0; $k = $i; $waehrung = "€"; 
echo "<table width=\"400\" border='0' cellpadding='' cellspacing='1' >";
/*Tabelle "kategorien"
  ++++++++++++++++++++  */        
//$query1 = "SELECT * FROM kategorien WHERE ort=2 OR ort=3 ORDER BY kat_id ASC" ;
$query1 = "SELECT * FROM kategorien WHERE kat_id=1 OR kat_id = 2 OR kat_id = 6 ORDER BY kat_id ASC" ;
$result1 = mysql_query($query1);
//Wie viele Kategorien(=gruppen) gibt es gemäß SELECT ?  
$kategorienzahl = mysql_num_rows($result1);  
//Kategorien(=gruppe)-Nummern liegen in $kat_id[$i], beginnend mit i=0
while ($ds1 = mysql_fetch_object($result1)) 
  {
   $gruppe[$i] = $ds1 -> gruppe;
   $kat_id[$i] = $ds1 -> kat_id;     
   $i++;
  }
$k = 0; 
while ($k <= $kategorienzahl-1)  {  
  //Tabelle "lieferservice" - Anzahl der Gerichte der jeweiligen Kategorie(=gruppe)    
  $query2 = "SELECT * FROM lieferservice WHERE kategorie = $kat_id[$k] ORDER BY liefer_id ASC";
  $result2 = mysql_query($query2);
  $zahl_gerichte = mysql_num_rows($result2);
  // leere Zeile vor jeder Kategorie ausgeben
  echo "<tr>";   
  echo "<td width =\"50\" bgcolor=\"\" >&nbsp;</td >";
  echo "<td width=\"300\" bgcolor=\"\">&nbsp;</td>";
  echo "<td width =\"50\" bgcolor=\"\" >&nbsp;</td >";
  echo "</tr>";
  
  //Kategorie(gruppe) ausgeben  
  echo "<tr>";
  echo "<td width =\"50\" bgcolor=\"#fbdc91\">Nr:</td >"; // Kopf für Bestellnummer aussgeben
  echo "<td width =\"300\" bgcolor=\"#fbdc91\">$gruppe[$k]</td >"; // Kategorie(=gruppe) ausgeben
  echo "<td width=\"50\" bgcolor=\"#fbdc91\"></td>";
  echo "</tr>";
  //Gerichte der jeweiligen Kategorie(=gruppe) aus "lieferservice" ausgeben  
  // (while-Schleife wird auomatisch so lange durchlaufen bis tabellenende der Auswahl erreicht)
  while ($ds = mysql_fetch_object($result2))  { 
    $liefer_id = $ds -> liefer_id; 
    $gericht= $ds -> gericht;
    $preis  = $ds -> preis;
	$zusatz1 = $ds -> zusatz1;
	$zusatz2 = $ds -> zusatz2;
	$zusatz3 = $ds -> zusatz3;
//echo $zusatz1; echo $zusatz2; echo $zusatz3;
	$string = "$zusatz1 $zusatz2 $zusatz3";
//	echo "Ausgangskette= "; echo $string; echo"<br>";
    // In $zusatz1, $zusatz2, $zusatz3 ersetzen der z.B. /3 usw. durch entsprechenden die Hochzahlen
    $convert = ARRAY (
      "/1" => "<sup>1</sup>",  
      "/2" => "<sup>2</sup>",    
      "/4" => "<sup>4</sup>",    
      "/8" => "<sup>8</sup>",        
	  "/9" => "<sup>9</sup>",
      "/5" => "<sup>5</sup>",
      "/6" => "<sup>6</sup>",  
      "/7" => "<sup>7</sup>",  	      
      "/*" => "<sup>*</sup>"     );
	  
//suchen und ersetzen für Gericht (z.B. Oliven)
   $gericht1 = str_replace(array_keys($convert), array_values($convert), $gericht); 
   // wenn 2 Hochzahlen sofort hintereinander stehen, ist ein Komma zwischenzusetzen 
   $gericht2 = ereg_replace("</sup><sup>","</sup><sup>,</sup><sup>",$gericht1);

//suchen und ersetzen für zusatz1, zusatz2, zusatz3  
   $string1 = str_replace(array_keys($convert), array_values($convert), $string);
   // echo "ersetzte Kette= "; echo $string1; echo"<br>";
   // wenn 2 Hochzahlen sofort hintereinander stehen, ist ein Komma zwischenzusetzen 
   $string2 = ereg_replace("</sup><sup>","</sup><sup>,</sup><sup>",$string1);
   // echo "komma dazwischen= "; echo $string2; echo"<br>"; 
		
    echo "<tr>";
    echo "<td width =\"50\" bgcolor=\"\">$liefer_id</td>"; // liefer_id = Bestellnr ausgeben
    echo "<td width =\"330\" bgcolor=\"\" title= \"$string2\" >$gericht2</td>";  // Gericht ausgeben, Zusatzbemerkungen zum Gericht auch hier über title= ...	
    echo "<td width=\"50\" bgcolor=\"\">$preis $waehrung</td>"; // Preis
    echo "</tr>";   
    }
  $k++;
   } // Ende große while-Schleife 
mysql_close($dz);
echo "</table>"; 
?>
```

CSS

```
a.tooltip{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}

a.tooltip:hover{z-index:25; background-color:#ff0}

a.tooltip span{display: none}

a.tooltip:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center}
```


----------



## Maik (24. März 2009)

Wenn du den von mir in Post #2 und #4 gezeigten HTML-Code für den Tooltip in deinem PHP-Code in der Zeile 74 nicht einfügst, erscheint selbiger auch nicht.

Eigentlich logisch, oder?

mfg Maik


----------



## dadsen (24. März 2009)

danke Maik für deine Nerven. hatte natürlich den bewussten HTMLText eingefügt, dir aber eine Quelle von der ursprungsdatei gemailt. entschuldigung
hier die echte Quelle:

```
<?php

$i = 0; $k = $i; $waehrung = "€"; 
echo "<table width=\"400\" border='0' cellpadding='' cellspacing='1' >";
/*Tabelle "kategorien"
  ++++++++++++++++++++  */        
//$query1 = "SELECT * FROM kategorien WHERE ort=2 OR ort=3 ORDER BY kat_id ASC" ;
$query1 = "SELECT * FROM kategorien WHERE kat_id=1 OR kat_id = 2 OR kat_id = 6 ORDER BY kat_id ASC" ;
$result1 = mysql_query($query1);
//Wie viele Kategorien(=gruppen) gibt es gemäß SELECT ?  
$kategorienzahl = mysql_num_rows($result1);  
//Kategorien(=gruppe)-Nummern liegen in $kat_id[$i], beginnend mit i=0
while ($ds1 = mysql_fetch_object($result1)) 
  {
   $gruppe[$i] = $ds1 -> gruppe;
   $kat_id[$i] = $ds1 -> kat_id;     
   $i++;
  }
$k = 0; 
while ($k <= $kategorienzahl-1)  {  
  //Tabelle "lieferservice" - Anzahl der Gerichte der jeweiligen Kategorie(=gruppe)    
  $query2 = "SELECT * FROM lieferservice WHERE kategorie = $kat_id[$k] ORDER BY liefer_id ASC";
  $result2 = mysql_query($query2);
  $zahl_gerichte = mysql_num_rows($result2);
  // leere Zeile vor jeder Kategorie ausgeben
  echo "<tr>";   
  echo "<td width =\"50\" bgcolor=\"\" >&nbsp;</td >";
  echo "<td width=\"300\" bgcolor=\"\">&nbsp;</td>";
  echo "<td width =\"50\" bgcolor=\"\" >&nbsp;</td >";
  echo "</tr>";
  
  //Kategorie(gruppe) ausgeben  
  echo "<tr>";
  echo "<td width =\"50\" bgcolor=\"#fbdc91\">Nr:</td >"; // Kopf für Bestellnummer aussgeben
  echo "<td width =\"300\" bgcolor=\"#fbdc91\">$gruppe[$k]</td >"; // Kategorie(=gruppe) ausgeben
  echo "<td width=\"50\" bgcolor=\"#fbdc91\"></td>";
  echo "</tr>";
  //Gerichte der jeweiligen Kategorie(=gruppe) aus "lieferservice" ausgeben  
  // (while-Schleife wird auomatisch so lange durchlaufen bis tabellenende der Auswahl erreicht)
  while ($ds = mysql_fetch_object($result2))  { 
    $liefer_id = $ds -> liefer_id; 
    $gericht= $ds -> gericht;
    $preis  = $ds -> preis;
	$zusatz1 = $ds -> zusatz1;
	$zusatz2 = $ds -> zusatz2;
	$zusatz3 = $ds -> zusatz3;
//echo $zusatz1; echo $zusatz2; echo $zusatz3;
	$string = "$zusatz1 $zusatz2 $zusatz3";
//	echo "Ausgangskette= "; echo $string; echo"<br>";
    // In $zusatz1, $zusatz2, $zusatz3 ersetzen der z.B. /3 usw. durch entsprechenden die Hochzahlen
    $convert = ARRAY (
      "/1" => "<sup>1</sup>",  
      "/2" => "<sup>2</sup>",    
      "/4" => "<sup>4</sup>",    
      "/8" => "<sup>8</sup>",        
	  "/9" => "<sup>9</sup>",
      "/5" => "<sup>5</sup>",
      "/6" => "<sup>6</sup>",  
      "/7" => "<sup>7</sup>",  	      
      "/*" => "<sup>*</sup>"     );
	  
//suchen und ersetzen für Gericht (z.B. Oliven)
   $gericht1 = str_replace(array_keys($convert), array_values($convert), $gericht); 
   // wenn 2 Hochzahlen sofort hintereinander stehen, ist ein Komma zwischenzusetzen 
   $gericht2 = ereg_replace("</sup><sup>","</sup><sup>,</sup><sup>",$gericht1);

//suchen und ersetzen für zusatz1, zusatz2, zusatz3  
   $string1 = str_replace(array_keys($convert), array_values($convert), $string);
   // echo "ersetzte Kette= "; echo $string1; echo"<br>";
   // wenn 2 Hochzahlen sofort hintereinander stehen, ist ein Komma zwischenzusetzen 
   $string2 = ereg_replace("</sup><sup>","</sup><sup>,</sup><sup>",$string1);
   // echo "komma dazwischen= "; echo $string2; echo"<br>"; 
		
    echo "<tr>";
    echo "<td width =\"50\" bgcolor=\"\">$liefer_id</td>"; // liefer_id = Bestellnr ausgeben
	

  //echo "<td width =\"330\" bgcolor=\"\" title= \"$string2\" >$gericht2</td>";  // Gericht ausgeben, Zusatzbemerkungen zum Gericht auch hier über title= ...	
   
/*+++*/  echo "<td width =\"330\" bgcolor=\"\"  a href=\"#\" class=\"tooltip\">$gericht2<span>$string2</span></a></td>"; // Zusatzbemerkungen über tooltip
	echo "<td width = \"50\" bgcolor=\"\">$preis $waehrung</td>"; // Preis
    echo "</tr>";   
    }
  $k++;
   } // Ende große while-Schleife 
mysql_close($dz);
echo "</table>"; 
?>
```
 
das bewusste teil ist mit /*+++*/ markiert

dadsen


----------



## Maik (24. März 2009)

Die korrekte Syntax steht zwar schon in meinem ersten Post, aber gut, dann eben nochmal:

```
<td width =\"330\" bgcolor=\"\"><a href=\"#\" class=\"tooltip\">$gericht2<span>$string2</span></a></td>
```


Und nutze bei Quellcode-Angaben bitte den Syntax-Highlighter, vielen Dank!

mfg Maik


----------

