PHP- CSS -Tooltips wie ?

D

dadsen

Grünschnabel
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
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
 
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):

HTML: 
<a href="#" class="tooltip">$gericht2<span>$string2</span></a>
CSS: 
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
 
@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
 
Solange du hier keine Einsicht in deinen Quellcode gewährst, kann dir auch nicht geholfen werden :rolleyes:

mfg Maik
 
Entschuldigung Maik, habe doch keine geheimnisse
PHP:
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
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}
 
Zuletzt bearbeitet von einem Moderator:
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
 
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: 
<?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
 
Zuletzt bearbeitet von einem Moderator:
Die korrekte Syntax steht zwar schon in meinem ersten Post, aber gut, dann eben nochmal:
Code: 
<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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück