Tooltip zeigt keine Ergebnisse

Question

Ich arbeite an einem Projekt, wo es eine Liste von 5 'Module' (Module1, Module2 usw.) gibt. Es wird in einer HTML-Tabelle angezeigt. Jedes Modul enthält einige Kapitel. Wenn also Module in der Tabelle angezeigt werden, muss ich einen Tooltip machen, so dass, wenn der Benutzer den Modulnamen überfliegt, ein kleiner Tooltip alle zugehörigen Kapiteltitel anzeigt. Ziemlich viel erfolgreich bei der Implementierung dieser, aber fest an einem Punkt, wo die Konsole zeigt die Nachricht als 'Empty string passed to getElementById().' und keine Kapitel werden in der QuickInfo angezeigt und Tooltip erscheint mit "Bitte warten ..". Hier ist mein Code für die gleiche,

dies meine jQuery und AJAX ist,

<link href='jquery-ui.css' rel='stylesheet' type='text/css'> 
<script src='jquery-1.12.0.min.js' type='text/javascript'></script> 
<script src='jquery-ui.js' type='text/javascript'></script> 
<script> 

$(document).ready(function() { 
    // initialize tooltip 
    $(".panel-body td").tooltip({ 
    track: true, 
    open: function(event, ui) { 
     var id = this.id; 
     var split_id = id.split('_'); 
     var module_id = split_id[1]; 

     $.ajax({ 
     url: 'fetch_details.php', 
     type: 'post', 
     data: { 
      module_id: module_id 
     }, 
     success: function(response) { 

      // Setting content option 
      $("#" + id).tooltip('option', 'content', response); 

     } 
     }); 
    } 
    }); 

    $(".panel-body td").mouseout(function() { 
    // re-initializing tooltip 
    $(this).attr('title', 'Please wait...'); 
    $(this).tooltip(); 
    $('.ui-tooltip').hide(); 
    }); 
}); 
</script> 

Und

fetch_details.php

<?php 
    $dbhost = 'localhost'; 
    $dbuser = 'root'; 
    $dbpass = ''; 
    $conn = mysql_connect($dbhost, $dbuser, $dbpass); 

    if(! $conn) { 
     die('Could not connect: ' . mysql_error()); 
    } 

    echo ''; 
    mysql_select_db('dbname'); 

    $moduleid = $_POST['module_id']; 

    $sql= mysql_query("SELECT title FROM table WHERE module_id='$moduleid'"); 

    $html = '<div>'; 
    $i = 1 ; 
    if($sql === FALSE) { 
     trigger_error('Query failed returning error: '. mysql_error(), E_USER_ERROR); 
    } else { 
     while($row = mysql_fetch_array($result)){ 
      $title = $row['title']; 

      $html .= "<span class='head'>"<?php echo $title ; ?> " :</span><span>"" mins</span><br/>"; 
      $i++; 
     } 
    } 
    $html .= '</div>'; 

    echo $html; 
?> 

Bis jetzt bin ich nicht in der Lage, herauszufinden, was mit falsch läuft Dies . Jede Hilfe oder Beratung wird sehr geschätzt.

Answer 1

Die gesamte Struktur der Werkzeugspitze hat, so etwas sein:

1) zum Beispiel, wenn Sie ein td Tooltip über mögen, muss der td -Tag einen Titel (die $('td#yourid').tooltip() zeigt den Titel des td-Tags mit ID von #yourid). Auch wenn Sie den Titel für Ihren Tooltip nicht möchten, müssen Sie ihn innerhalb Ihres Tags verwenden und später können Sie ihn durch einen Ajax-Rückgabewert ändern. so:

<table> 
    <tr> 
     <td id = "tooltip-1" href = "#" title = "Nice tooltip" style="height:100px;width:100px;border:1px solid black;"><td>  
    </tr> 
</table> 

2) muss der Tooltip Struktur wie diese sein, wenn Sie über die td-Tag Tooltip wollen selbst

<script> 
    $(function() { 

     $("#tooltip-1").tooltip({ 
      open: function(event, ui) { 

       var x = $(this); //this is for getting the tooltip-1 object to later use in ajax call 

       $.ajax({ 
        type: 'post', 
        url: 'fetch_details.php', 
        data: { 
          'yourdata-name': 'yourdata' 
         }, 
        success: function(html){ 
         x.tooltip({ 
          content: html 
          }); 

        } 

        }); 

       } 
      }); 
    }); 
    </script> 

so müssen Sie das Objekt setzen, das Sie Tooltip wollen , in einer variablen wie x, und dann, dass x in ajax verwenden, um das Objekt zu zeigen, so dass die Tooltip das Ergebnis des zurückkehr ajax Wert

3) Tooltip ist neu in jquery-ui zeigt und ist irgendwie inkompatibel mit Bootstrap. Wenn Sie also bootstrap verwenden, versuchen Sie, die Bootstrap-Version von tooltip

4) es gibt viele Codierungsfehler in Ihrem Code zum Beispiel die Syntax von ist völlig falsch. z.B. Sie können <?php ?> nicht in einem anderen <?php ?> verwenden.

Mein Rat wäre, zuerst meinen Code ausführen und einen einfachen String von Fetch-details.php zu Ajax Erfolg Funktion Echo zu sehen, dass diese Struktur funktioniert und dann können Sie Ihren Code manipulieren basierend auf diese Struktur

seit Sie gaben nur wenig Informationen über Ihren Code und den Fehler (nach Zeilen). Das war alles, was ich tun konnte, um zu helfen. Ich hoffe, diese Informationen helfen Ihnen bei Ihrem Programm