Tooltip does not shows results - php

Question

I am working on a project where there is a list of 5 'Modules'(Module1, Module2... so on). Its displayed in a html table. Each module has some chapters in it and so when modules are displayed in the table, I need to make a tooltip so that when user hovers over the module name a small tooltip shows all the chapter titles associated with it. Pretty much successful in implementing this but stuck at a point where console is displaying message as
'Empty string passed to getElementById().' and no chapters are being shown in tooltip and tooltip appears with "Please Wait..".
Here is my code for the same,
this is my jQuery and AJAX,
<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>
And 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;
?>
Till now I am unable to find out what's going wrong with this . Any help or advice will be highly appreciated.

Answer 1

The whole structure of the tool tip has to be something like this:
1) for example if you want to tooltip over a td , the td tag must have a title(the $('td#yourid').tooltip() shows the title of the td tag with id of #yourid). even if you don't want the title for your tooltip, you have to use it inside the your tag and later you can change it by an ajax return value. so:
<table>
<tr>
<td id = "tooltip-1" href = "#" title = "Nice tooltip" style="height:100px;width:100px;border:1px solid black;"><td>
</tr>
</table>
2) the tooltip structure must be like this if you want to tooltip over the td tag itself
<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 you have to put the object that you want to tooltip on, in a variable like x and then use that x in ajax to point to the object so the tooltip will show the result of the ajax returning value
3) tooltip is new in jquery-ui and is somehow incompatible with bootstrap. so if you are using bootstrap try to use the bootstrap version of tooltip
4) there are alot of coding error within your code for example the syntax of $html .= "<span class='head'>"<?php echo $title ; ?> " :</span><span>"" mins</span><br/>"; is completely wrong. e.g. you can't use <?php ?> inside another <?php ?>.
My advice would be to first run my code and echo a simple string from fetch-details.php to ajax success function to see that this structure works and then you can manipulate your code based on this structure
since you gave little information about your code and the error given (by line) this was all i could do to help. i hope this information helps you with your program