Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
Dieses Thema ist geschlossen.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

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

    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:
    PHP-Code:
    echo 
    '<center><a rel="tt"><img src="'.$bild['bildlink'].'" 
    /></a><div 
    style="display:none;">'
    .$bild['name'].'</div></center>'
    Tooltip Css und Script Code:

    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


  • #2
    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
    Me on GitHub
    Perfect vim configuration
    MAC Adress faker

    Kommentar


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

      jQuery Tooltip Plugin Demo
      apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

      Kommentar


      • #4
        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
        Me on GitHub
        Perfect vim configuration
        MAC Adress faker

        Kommentar


        • #5
          @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.

          Kommentar


          • #6
            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

            PHP-Code:
            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
            apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

            Kommentar


            • #7
              @Black Ich weis das hab ich gerade übersehn

              Edit: Ich seh meinen Fehler nicht..

              PHP-Code:
              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'
              new in 3.2</a>
              </
              div>
              $(
              "#bild").tooltip({ effect'slide'});  ';
               } 

              Kommentar


              • #8
                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
                Me on GitHub
                Perfect vim configuration
                MAC Adress faker

                Kommentar


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

                  Hier die Fehlerbeschreibung:

                  Code:
                  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

                  Kommentar


                  • #10
                    Schau dir mal Zeile drei an

                    Und was macht der CSS-Code in einem echo ?

                    mfg Timo
                    Me on GitHub
                    Perfect vim configuration
                    MAC Adress faker

                    Kommentar


                    • #11
                      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
                      apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

                      Kommentar


                      • #12
                        ah so?:

                        PHP-Code:
                        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...

                        Kommentar


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

                          mfg Timo
                          Me on GitHub
                          Perfect vim configuration
                          MAC Adress faker

                          Kommentar


                          • #14
                            Ah hab das mit dem Trigger Button verwechselt..

                            Kommentar


                            • #15
                              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

                              PHP-Code:
                              <a id="download_now">Download now</a
                              dieser download button ist dein kleines div mit vorschaubildern.

                              danach kommt das tooltip fenster

                              PHP-Code:
                              <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:
                              PHP-Code:
                              //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
                              apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

                              Kommentar

                              Lädt...
                              X