My solution involved utilizing the 'this' keyword, which points to the current element being hovered over, specifically an <a> tag. By leveraging this, I could access the unique ID stored in the 'id' attribute of each <a> element. Subsequently, I utilized jQuery to perform a GET request and fetch the content for the tooltip related to that particular ID.
Below is how my final JavaScript code was structured:
// Initiating AJAX request
$.get(
bs_url + '/ajax/' + ajax_action + '/', // Server-side script
ajax_params, // Data for server-side script
function(data, textStatus) {
// alert("Response Data Loaded");
$("li", list_elm).remove();
$("div#related_questions_container").hide("slow");
if (data) {
$("div#related_questions_container").show("slow");
list_elm.append(data);
// Adding tooltips to dynamically loaded content
$("ul#related_questions li a").tooltip({
content: function(callback){
var query_id = this.id.substring('id_'.length)
var tooltip_content_ajax_action = 'get-query-info';
var tooltip_content_ajax_params = { 'query_id' : query_id}
// Getting HTML partial for given query_id
$.get(
bs_url + '/ajax/' + tooltip_content_ajax_action + '/', // Server-side script
tooltip_content_ajax_params,
function(data, textStatus) {
if (data) {
callback(data);
}
},
'html'
)
}
});
}
},
'html'
);
Update:
While the initial approach worked, it posed efficiency issues as triggering a tooltip would trigger a new AJAX request for its content, resulting in a noticeable delay (2-3 seconds) before loading. To address this, I modified the implementation so that tooltip content was loaded during the initial AJAX call fetching the <li> elements. The content is encapsulated within a hidden div by default, which is then referenced in the tooltip plugin's callback for efficient loading.
// Initiating AJAX request
$.get(
bs_url + '/ajax/' + ajax_action + '/', // Server-side script
ajax_params, // Data for server-side script
function(data, textStatus) {
// alert("Response Data Loaded");
$("li", list_elm).remove();
$("div#related_questions_container").hide("slow");
if (data) {
$("div#related_questions_container").show("slow");
list_elm.append(data);
// Adding tooltips to dynamically loaded content
$("ul#related_questions li a").tooltip({
content: function(callback){
var tooltip_content_div = $("div#query_" + this.id);
callback(tooltip_content_div.html());
}
});
}
},
'html'
);
The following snippet represents the HTML fetched through the AJAX request:
<?php
foreach($this->related_queries_data as $o){
?>
<li>
<a href="#" title="<?php echo htmlspecialchars($o['oQuery']->getTitle()) ?>" id="id_<?php echo htmlspecialchars($o['oQuery']->getId()) ?>" ><?php echo htmlspecialchars($o['oQuery']->getTitle()); ?></a>
<div id="query_id_<?php echo htmlspecialchars($o['oQuery']->getId()) ?>" class="query_tooltip_content"><!-- set to display:none by default -->
<div id="query_info">
<div style="width:50%; float:left;">
<ul>
<li><b>Raised by: </b><?php echo htmlspecialchars($o['oQuery']->getRaisedUser()->getName())?></li>
<li><b>Raised on: </b><?php echo htmlspecialchars($o['oQuery']->getRaised()->format('d-m-Y H:i:s'))?></li>
</ul>
</div>
<div style="width:50%; float:left;">
<ul>
<li><b>Assigned to: </b><?php $oUser = $o['oQuery']->getAssignedUser(); echo htmlspecialchars(is_null($oUser)?'-':$oUser->getName());?></li>
<li><b>Status: </b><span class="<?php echo $o['oQuery']->getPriority()->getName() ?>"><?php echo htmlspecialchars($o['oQuery']->getStatus()->getDisplayName())?> <?php echo (!is_null($o['oQuery']->getDateQueryClosed()) ? ' on '.$o['oQuery']->getDateQueryClosed()->format('d-m-Y') : '') ?></span></li>
</ul>
</div>
<div style="clear:both;"></div>
</div></div></li>
<?php
}
?>