Hi,
I am working on a tooltip which shows the content in tooltip if present.
But the code I am using shows the empty tooltip even the content returned is empty.
I don't want to show tooltip or qtip when the content is empty.. :(
Here's my code
HTML
echo "<td class='tr' bgcolor='#ffffff' align='center' width='25'><a id='$i $month $year' class='buttonbar' target='_blank' \"><font $class>$i</font></a></td>";
Jquey
$(document).ready(function () {
$('.buttonbar').each(function() {
$(this).qtip(
{
content: {
title: tooltip_ajax($(this).attr('id'))
//title: 'Store ' + $(this).attr('id') // Use the ALT attribute of the area map
},
style: {
width: 200,
padding: 5,
background: '#ffffff',
color: 'black',
textAlign: 'left',
border: {
width: 7,
radius: 5,
color: '#ffffff'
},
tip: {
corner: 'topLeft', // We declare our corner within the object using the corner sub-option
color: '#ffffff',
size: {
x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width.
y : 18 // Depending on which corner your tooltip is at, x and y could mean either height or width!
}
}
},
hide: {
fixed: true,
delay: 100
}
});
});
});
//}
function tooltip_ajax(date) {
result = "";
var str = date.split(' ');
$.ajax ({
type: "POST",
url: "popup.php",
data: {day: str[0], month: str[1], year: str[2]},
async: false,
success: function(data) {
if (data != 0) {
result = data;
}
}
});
return result;
}