Benötige Hilfe bei Tooltipp mit Javascript und CSS

[Duergy]

Servus Gemeinde
Ich habe ein Tooltipp was ich für "Infoboxen" nutze. Das funzt auch Prima.
Hier erstmal die Quellcodes:

Die CSS-Datei

#tooltip 
{
    font-size:9pt;
    padding: 3px;
    background-color: #def;
    width: 200px;
    height: auto;
    border: 1px solid #06f;
    color: #06f;
    top: 220px;
    left: 220px;
    position: absolute;
    z-index: 1;
    display: none;
    filter:alpha(opacity=90); /* IE */
    -moz-opacity: 0.90; /* Gecko */
    opacity: 0.90; /* Opera */
}

Javascript:

function showit() {
if(drag) {
  document.getElementById('tooltip').style.left = event.x + 15 + "px";
  document.getElementById('tooltip').style.top = event.y + 15 + "px";
}
}

function showitMOZ(e) {
if(drag) {
  document.getElementById('tooltip').style.left = e.pageX + 15 + "px";
  document.getElementById('tooltip').style.top = e.pageY  + 15 + "px";
}
}

function tagTip(text) {
document.getElementById('tooltip').style.display='block';
document.getElementById('tooltip').innerHTML = text;
drag = true;
if (!document.all) {
  window.onmousemove=showitMOZ;
} else {
  document.onmousemove=showit;
}
}
function unTip() {
  document.getElementById('tooltip').style.display='none';
  drag = false;
}

functions.php

function info_tooltip($info_tooltip_text){
$info_tooltip_text="Information<hr>$info_tooltip_text";
echo"<a onmouseover=\"tagTip('$info_tooltip_text')\" onmouseout=\"unTip()\" href=\"#\"><img src=\"images/information.png\" alt=\"\" title=\"\" border=\"0\"></a>";
}

Anwendungsbeispiel:

info_tooltip("Das ein oder andere kann man gut über so ein Tooltipp erläutern!");

So jetzt möchte ich aber nicht nur "Infoboxen" sondern auch Warnboxen und der gleichen.
Ansich würde ich der Funktion eine Weitere Variable übergeben was für eine Box sie dann ist. Allerding stehe ich vor dem Javascript Rätsel wie ich das dort mit einfließen lasse, habe von Javascript absolut keine Ahnung.

Desweiteren bin ich am grübeln wie ich das CSS technisch lösen soll.

Hoffe ihr könnt mir irgendwie helfen.

 

[theHacker]

Wo is da Java-Code?

 

[Duergy]

die 2. Code Box

 

[theHacker]

Das is JavaScript.

 

[Duergy]

Joah okay. habe es mal im Titel angepasst. evtl kannst du mir ja weiterhelfen?

 

[TerraTux]

Reich die Variable einfach an die JS-Funktion durch:

function info_tooltip($info_tooltip_text, $type = 'info')
{
   // $type: info || warn || error (default: info)
   $info_tooltip_text="Information<hr>$info_tooltip_text"; 
   echo"<a onmouseover=\"tagTip('$info_tooltip_text','$type')\" onmouseout=\"unTip()\" href=\"#\"><img src=\"images/information.png\" alt=\"\" title=\"\" border=\"0\"></a>"; 
}

JS:

function tagTip(text, type)
{
   document.getElementById('tooltip').style.display='block';
   document.getElementById('tooltip').innerHTML = text;
   document.getElementById('tooltip').className = type; // "warn", "info" oder "error"
   drag = true;
   if (!document.all) {
      window.onmousemove=showitMOZ;
   } else {
      document.onmousemove=showit;
   }
}

CSS:

#tooltip { ... }
#tooltip .info { ... }
#tooltip .warn { ... }
#tooltip .error { ... }

Ist nur der Ansatz, wie Du die Variable bis in Dein JavaScriptchen bekommst. Hier gehört noch die Prüfung rein, ob type gesetzt ist, und wenn nicht, soll ein Standardwert genutzt werden, usw...

Gruß

 

[Duergy]

hey das klingt gut, werde ich mal eben ausprobieren

 

[Duergy]

Hmm irgendwie scheint es nicht zu gehen,
hier mal meine Codes

den JS habe ich 1zu1 von die Übernommen

functions.php

function show_tooltip($tooltip_text, $tooltip_type = 'info'){
switch($tooltip_type)
{
  case "warn":
	$tooltip_img="warn.png";
    $tooltip_text="Warnung<hr>$tooltip_text";
    break;

  default:
    $tooltip_img="information.png";
	$tooltip_text="Information<hr>$tooltip_text";
    $tooltip_type="info";
	
    break;
}

echo"<a onmouseover=\"tagTip('$tooltip_text', $tooltip_type)\" onmouseout=\"unTip()\" href=\"#\"><img src=\"images/$tooltip_img\" alt=\"\" title=\"\" border=\"0\"></a>";
}

CSS

#tooltip 
{
    font-size:9pt;
	padding: 3px;
	width: 200px;
	height: auto;
	top: 220px;
	left: 220px;
	position: absolute;
	z-index: 1;
	display: none;
	filter:alpha(opacity=90); /* IE */
	-moz-opacity: 0.90; /* Gecko */
	opacity: 0.90; /* Opera */
}
#tooltip .info
{
	background-color: #BDE5F8;
	border: 1px solid #00529B;
	color: #00529B;
}
#tooltip .warn
{
	background-color: #FEEFB3;
	border: 1px solid #9F6000;
	color: #9F6000;
}

ach hatte ich nicht erwähnt im HTML wir natürlich noch ein

<div id="tooltip"></div>

eingefügt welches ich jetz erweitert habe

<div id="tooltip" class="info"></div>

Irgendwo muss noch ein kleiner Fehler drinne sein...

 

[Sebmaster]

Beim Aufruf fehlt Anführungszeichen.

Ich nehme alles zurück, wenn du ne Variable namens warn und info belegt hast

 

[Duergy]

ahhh fehler gefunden:

CSS notwork

#tooltip .warn

CSS work

#tooltip.warn

und in der functions.php auch den $tooltip_type in einfach anführungszeichen

echo"<a onmouseover=\"tagTip('$tooltip_text', '$tooltip_type')\" onmouseout=\"unTip()\" href=\"#\"><img src=\"images/$tooltip_img\" alt=\"\" title=\"\" border=\"0\"></a>";
}

 

[Sebmaster]

CSS notwork

#tooltip .warn

CSS work

#tooltip.warn

Würde auch funktionieren, nimmt halt ein bisschen mehr mit, als gewünscht