[Erledigt] ToolTip mit Grafik und spezielle Detail's anzeigen

[Forumsgast]

Sehr geehrte Php.de Community ^^,

Ich habe ein Script wo ein Bild ausgegeben wird, nun möchte ich das per ToolTip noch spezielle Daten ausgegeben werden d.h man geht übers bild und bekommt verschiedene Daten

Mein Problem besteht darin das die Daten nicht mit dem Mousover reagieren fazit. Deteils werden unter dem Bild angezeigt in Normaler Schrift wenn man mit der Maus drüber fährt..

Ausgabe:

echo 
'<center><a rel="tt"><img src="'.$bild['bildlink'].'" 
/></a><div 
style="display:none;">'.$bild['name'].'</div></center>'; 

Tooltip Css und Script Code:

<style>
body
 {font-family:arial;font-size:12px;text-align:center;}
div#paragraph 
{width:300px;margin:0 auto;text-align:left}
a 
{color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}
a:hover 
{color:#000;text-decoration:none;}
.clear {clear:both}


/* 
Tooltip */

#tooltip {
position:absolute;
z-index:9999;
color:#fff;
font-size:10px;
width:180px;

}

#tooltip
 .tipHeader {
height:8px;
background:url(images/tipHeader.gif) 
no-repeat;
}


#tooltip .tipBody {
background-color:#000;
padding:5px
 5px 5px 15px;
}

#tooltip .tipFooter {
height:8px;
background:url(images/tipFooter.gif)
 no-repeat;
}

</style>



<script 
type="text/javascript" 
src="http://code.jquery.com/jquery-latest.js"></script>  
<script
 type="text/javascript">  
  
$(document).ready(function() {  

  
    //Select all anchor tag with rel set to tooltip  
    
$('a[rel=tt]').mouseover(function(e) {  
          
        //Grab
 the title attribute's value and assign it to a variable  
        
var tip = $(this).next().html();    
          
        //Remove 
the title attribute's to avoid the native tooltip from the browser  

        $(this).attr('title','');  
          
        //Append 
the tooltip template and its value  
        $(this).append('<div 
id="tt"><div class="tipHeader"></div><div 
class="tipBody">' + tip + '</div><div 
class="tipFooter"></div></div>');       
          

        //Set the X and Y axis of the tooltip  
        
$('#tt').css('top', e.pageY + 10 );  
        $('#tt').css('left', 
e.pageX + 20 );  
          
        //Show the tooltip with 
faceIn effect  
        $('#tt').fadeIn('500');  
        
$('#tt').fadeTo('10',0.8);  
          
    
}).mousemove(function(e) {  
      
        //Keep changing the X 
and Y axis for the tooltip, thus, the tooltip move along with the mouse 
 
        $('#tt').css('top', e.pageY + 10 );  
        
$('#tt').css('left', e.pageX + 20 );  
          
    
}).mouseout(function() {  
      
        
        
$(this).attr('title',$('.tipBody').html());  
      
        
//Remove the appended tooltip template  
$(this).children('div#tt').remove();
  
          
    }).next().hide();
  
});  
  
</script>

Ich bedanke mich schonmal für eure Hilfe

[Forumsgast]

Hallo,

Ich rate dir an ein JavaScript-Framework wie MooTools oder jQuery zu empfehlen, denn dort gibt es schon eine Reihe von "tollaussehenden" Tooltips.

mfg Timo

[Forumsgast]

wie ich sehe, nutzt du jQuery, wozu dann soviel code wenn es jQuery plugins gibt?

jQuery Tooltip Plugin Demo

[Forumsgast]

Hoppla - Das er jQuery benutzt habe ich nicht mal beachtet...
In diesem Fall ist es ja noch besser

Hier auch noch eines: http://flowplayer.org/tools/tooltip/index.html

mfg Timo

[Forumsgast]

@Ti-Systems beim Flowplayer is das Problem das wenn ich mehrere Bilder z.B 5 in die Datenbank eintrage, dann später immer per Hand die Bilder in die Css rein tuen muss.

Ich brauch ein Tooltip Version wo wenn ich dann in naher Zukunft mehr als 200 Bilder mit Deteil's habe nicht per Hand sonder Automatisch ausgegeben wird.

[Forumsgast]

du kannst doch mit php einen HTML code generieren. diese tooltip plugins machen ja nichts anderes als schon vorhandene elemente sichtbar machen.

das gleiche hast du ja am anfang auch gemacht

style="display:none;">'.$bild['name'].'</div></center> 

hier ist eine anleitung was für ein HTML code du benötigst um individuellen inhalt in das tooltip fenster einzutragen

http://flowplayer.org/tools/demos/tooltip/any-html.html

[Forumsgast]

@Black Ich weis das hab ich gerade übersehn

Edit: Ich seh meinen Fehler nicht..

echo '/* trigger button */
#bild {
    background:transparent url(.$bild['userpic'].) no-repeat scroll 0 0;
    display:block;
    height:44px;
    margin-bottom:30px;
    overflow:hidden;
    text-indent:-999em;
    width:159px;
    cursor:pointer;
}

/* mouseover state */
#download_now:hover {
    background-position:0 -44px ;        
}

/* clicked state */
#download_now:focus {
    background-position:0 -88px;
}

/* tooltip styling */
.tooltip {
    display:none;
    background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
}

/* a .label element inside tooltip */
.tooltip .label {
    color:yellow;
    width:35px;
}

.tooltip a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
}


 
 
<div class="bild">

    <table style="margin:0">
        <tr>
            <td class="label">Name</td>
            <td>.$bild['name'].</td>
        </tr>
        <tr>
            <td class="label">Preis</td>
            <td>.$bild['wert'].</td>
        </tr>

    </table>

    <a href="/3.2/">What's new in 3.2</a>
</div>
$("#bild").tooltip({ effect: 'slide'});  ';
 } 

[Forumsgast]

Hallo,

Wie wäre es mit einer Fehlerbeschreibung?
Ich habe mir das ganze nicht richtig angeschaut, aber stimmt es, dass auf der zweit letzten Zeile zwei Semikolone hintereinander sein sollten?

mfg Timo

[Forumsgast]

So sry ne am ende sollte vor dem letzen Simikolon noch ein ' sein wird aber nicht angezeigt o.O

Hier die Fehlerbeschreibung:

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in D:\xampp\htdocs\cms\index.php(61) : eval()'d code(1) : eval()'d code on line 8

[Forumsgast]

Schau dir mal Zeile drei an

Und was macht der CSS-Code in einem echo ?

mfg Timo

[Forumsgast]

du sollst doch nciht für jedes bild eine css generieren es reicht wenn du mit php NUR die divs generierst mit <img> tags in den tooltip fenster und dem img tag dann als src den wert aus der datenbank übergibst

[Forumsgast]

ah so?:

background:transparent url('.$bild['userpic'].') no-repeat scroll 0 0; 

Iwie verwechsel ich hier alles

Via Css wird ja der Tooltip normal ausgegeben und weil ich die Bild url in der Datenbank speicher hab ich die in den echo reingetan o.O

Edit: Iwie check ich garnichts mehr...

[Forumsgast]

CSS gibt gar nichts aus. Es sagt lediglich, wie das "auszugebene" Aussieht (Farbe, Form, Abstände, etc.)

mfg Timo

[Forumsgast]

Ah hab das mit dem Trigger Button verwechselt..

[Forumsgast]

nein ,

also wie du auf dieser seite schön sehen kannst
http://flowplayer.org/tools/demos/tooltip/any-html.html

haben die da ein download button

<a id="download_now">Download now</a> 

dieser download button ist dein kleines div mit vorschaubildern.

danach kommt das tooltip fenster

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

da drin kommen deine texte oder andere bilder rein.

in der CSS datei wird als hintergrund bild für das tooltip das hier genommen


also, was du im grunde brauchst ist folgendes:

//SQL query um daten aus db auslesen
while($row = mysql_fetch_array($sql)){
echo '<a class="vorschau">'.$row['bildname'].'</a>';
echo '<div class="tooltip"><img src="'.$row['url'].'" /></div>';
} 

im JS machst du dann $(".vorschau").tooltip({ effect: 'slide'});
so ungefair, ich habe mich nicht mit dem plugin beschäftigt aber halt so ungefair. im CSS definierst du nur wie das tooltip aussehen soll oder dein vorschau bild . mit PHP generierst du HTML ausgabe und mit JS legst du das verhalten des tooltips fest