Tooltip - Links in Infobox

[userman2]

Hallo Zusammen,

habe kleines Problemchen!

Habe ein Tooltip gemacht, wo ich auch einem Bild mehrere Infobox anzeige! Das klappt wunderbar, jedoch muss ich noch Links einsetzen in des Tooltips, das klappt nicht!

Mein Code:

echo '<li class="bar1">';
echo           '<a href="#" title="">';        
echo          '<span class="tooltip">';
                                  echo "Crit: ". $serviceCrit[1] . "<br />"; 
                                  echo "Warn: ". $serviceWarn[1] . "<br />"; 
                                  echo "Unk: ". $serviceUnkn[1] . "<br />"; 
                                  echo "OK: ". $serviceOK[1]; 
                                 // echo          "<a href='http://thumbs.myopera.com/sz/colx/drlaunch/albums/37656/no-wai001.jpg'>Link to image1</a>";                                              

                                  
                                  
echo '</span>';                              
echo          '</a>';
echo      '</li>';

Da wo "//echo...." steht habe ich probiert ein Link zu setzen, das ist aber quatsch! Link in Link macht man nicht! und sonst wenn ich außerhalb mache geht auch nicht!

Könnt Ihr mir hier paar tipps geben wie ich das machen kann, oder vielleicht paar coole Beispiele wo das auf einem Bild geht!?

Ah ja ich habe dazu CSS benutz, also ohne javascript!

Bitte um Hilfe! Danke!

 

[threadi]

Bitte zeig auch deinen HTML-Code, nicht den PHP-Code, wenn es um Darstellung und insbesondere CSS geht.

An dem was man dort erkennen kann, schreibst Du offenbar nicht validen HTML-Code. Du hast einen Link der alles umgibt und willst darin wiederum weitere Links schreiben - das geht natürlich nicht. Du müsstest den umgebenden Link gegen ein nicht-verlinkendes Element ersetzen, welches hier auch valide ist. Z.B. ein <div> oder ein <span>. Beide kannst Du per CSS dann auch so stylen wie der ursprüngliche Link aussehen sollte.

 

[userman2]

Hi threadi,

danke für schnelle Reaktion!

Ja das Oben ist eigentlich mein HTML! Ich habe nur in PHP umgeschrieben, weil ich da was dynamisch aus DB zuweisen muss!

aber hier nochmal mein CSS:

#map2 ul {
    margin: 0;
    padding: 0;
    list-style: none; 
}




#map2 a {
    position: absolute;
    width: <?php echo $bar_width ?>px;
    height: <?php echo $graph_height ?>px;
    color: #000000;
    text-decoration: none;
    border: 1px solid transparent;
}



#map2 .bar1 a {
 top: <?php echo $img_height - ($margins + $graph_height);?>px;
 left: <?php echo $bar_width + $margins; ?>px;
}



/* Infobox */
#map2  .tooltip {
    width:80px; 

    position: absolute; 
        
    bottom: -1em; 
    
    margin:0 0 7px 0;
    
    padding:15px;
    
    background-color: #cccccc;  
    
    text-align:CENTER; 

    line-height:1.5; 

    border:solid 1px; 
    
    margin-left: -2.0em; 
    
    left: -3000100px; 
    
    border-radius:7px; 

    display:block;  
    
    visibility:nohidden; 

        
    
    
}

#map2 a:hover .tooltip {
    left: 33px; 
   

}

Und jetzt noch PHP zusammen mit HTML:

<div id="map2">
  <img src="meinBild.php" alt="" width="<?php echo $img_width; ?>" height="<?php echo $img_height; ?>" />
  <ul>
<?php
if(isset($hostname[1]))
{
echo '<li class="bar1">';
echo           '<a href="#" title="">';        
echo          '<span class="tooltip">';
                                  echo "Crit: ". $serviceCrit[1] . "<br />"; 
                                 // echo          "<a href='http://blablaur.de'>Link</a>";                                              

                                  
                                  
echo '</span>';                              
echo          '</a>';
echo      '</li>';
}
?>

  </ul>
</div>

Wäre euch sehr dankbar! Wenn jemand mir zeigen kann wie man mehrere Links ins Tooltip einbinden kann!?

 

[threadi]

Die nötigen Stichwörter hatte ich dir bereits genannt. Und Du hast wieder nicht den HTML-Code geliefert, folglich fällt Hilfe etwas schwer. Allerdings sehe ich, dass mein Tipp oben genau passen würde. Du müsstest nur noch zusätzlich im CSS

#map2 a:hover .tooltip {
    left: 33px; 
   

}

ändern zu

#map2 span:hover .tooltip {
    left: 33px; 
   

}

 

[userman2]

threadi Du bist mein HELD)))))

Im wahre Sinne des Wortes! ;)

Danke nochmal!