Hi hcohen,
If you take a look at the sourcecode for the page, you can see the JavaScript/jQuery that actually controls this:
;(function($) {
$(document).ready(function() {
var counter=0;
var renderedCssClass = "lia-panel-tooltip-tr-bl";
var fetchedElements = {};
$('h2.message-subject').each(function () {
var item = $(this);
var msgItem = item.parents('tr.lia-list-row');
var href = msgItem.attr('class');
var UidIndex = href.indexOf("lia-js-data-messageUid-");
if(UidIndex != -1)
{
UidIndex = UidIndex + 23;
var msgId = href.slice(UidIndex, href.indexOf(" ", UidIndex));
}
else
{
var msgId = "None";
}
var tipWidth = 250;
var itemWidthOffset = item.offset().right;
var position = 'top right';
if ((itemWidthOffset + tipWidth) > $(window).width()){
position = 'top left';
}
if (msgId!="null"){
var elementId = "lia_custom-tooltip1_" + counter + "_" + msgId;
$("#lia-panel-tooltip").append("<div id='" + elementId + "' style='hidden'></div>");
$.ajax({
url: "${community.urls.communityPrefix}/restapi/vc/?restapi.response_template=message_infobox&msg_id=" + msgId,
success: function(data) {
$("#" + elementId).append(data);
$("#" + elementId).hide();
}
});
if (!$("#" + elementId).hasClass(renderedCssClass)) {
$("#" + elementId).addClass(renderedCssClass);
}
var tooltipObj = item.tooltip({
tip: "#" + elementId,
position: position,
onBeforeShow: function() {
$("#" + elementId).show();
}
});
}
counter++;
});
});
})(LITHIUM.jQuery);
Basically, for each message subject on the page, it's performing a few actions:
The tooltip is using jQuery Tools Tooltip (http://jquerytools.org/demos/tooltip/index.html). So when a user hovers over the subject, the tooltip is shown rendering the content pulled in via the ajax call.
Hopefully this will help get you started in the right direction!
-Adam
Hi Becky,
Indeed, the code above was taken directly from here on the Lithosphere. A few of our customers have implemented similar customizations, and their exact code may differ slightly depending on their needs.
Regards,
Adam
Where do people put this javascript? I copied it and put it in a <script> tag but I got errrors:
Any ideas?
If you're working with a custom component, I'd suggest putting JavaScript snippets in the @liaAddScript macro. This will place the script near the end of the page so that it loads after all of the core libraries. What's likely happening is that the code you added is trying to use the jQuery methods before it's been setup.
Here's an example of using @liaAddScript:
