I am using qTip to to get customized tooltip on the span elements that
get created dynamically and get appended to the div element using
innerHTML. qTip seems to work fine for me with the span elements
hardcoded, but when the same are being creating through javascript
then the qTip fails to render custom tooltip. Instead what I get is
the ordinary tool tip with the title text.
The span elements that I am generating have title with the intended
title text, which is supposed to come up in the tooltip. I made
changes to the qTip method call to look for span elements and display
the title text in the tooltip.
I also tried creating a span element instead of appending the lements
to the innerHTML, but the result was same.
Below is the code snippet I tried using:
For creating span elements and assigning the same to innerHTML of the
'div' with id' mCalInput'.
var eventEntries = root.feed.getEntries();
var events = '';
// If there is matches for the date query
if (eventEntries.length > 0) {
for (var i = 0; i < eventEntries.length; i++) {
var event = eventEntries[i];
// Print the event title of the matches....
events = events + '<span title="' + event.getTitle().getText() +
'">' + displayDate + ' : ' + event.getTitle().getText() + '</span></
br>' ;
}
document.getElementById('mCalInput').innerHTML = events;
//document.write(events);
} else {
// No match is found for the date query
document.getElementById('mCalInput').innerHTML = 'No events
found.';
}
Html code containing the div element:
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td valign="top"><div id="dhtmlxCalendar"></div> click date
for events list</td>
<td valign="top">
<strong>Events :</strong><br>
<input type="hidden" id="dateformat" value="%Y-%m-%d" />
<input type="hidden" id="dateSelected" name="dateSelected" /
><br>
<div id="mCalInput"></div>
</td>
</tr>
</table>
jQuery method qtip called:
<script type="text/javascript">
$(document).ready(function()
{
$('span[title]').qtip({
position: {
corner: {
target: 'topRight',
tooltip: 'bottomLeft'
}
},
style: {
name: 'dark',
padding: '7px 13px',
width: {
max: 210,
min: 0
},
tip: true
}
});
});
</script>
Any help would be appreciated.
Thanks,
Abhinav.
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=.
