Hi,
We are new to Lithium and noticed in Dev Nation that when you mouse over a topic you get a nice preview in a bubble. How does one go about configuring something like this? Does anyone have code they can share on setting this up?
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:
Thank you, that seems to have taken care of the error and your suspiciouns were correct indeed. Now I get another error instead ...
If your community doesn't already have the tooltip jQuery library loaded, you may have to add that as well.
The snippet above is not the full implementation details, but rather was just a sample to point the topic author in the right direction. If you're having trouble implementing this type of customization yourself, Lithium has a Professional Services team that can work with you to scope out your requirements and perform the necessary implementation for you. If you're interested in that, please file a case via the support portal so that you can get into contact with someone from the Professional Services team.
jQuery library is loaded, console.log is typing a test message...
However, I got same error message as another person in this post from 20012...
Uncaught Cannot find tooltip for [object Object]
$.extend.show @ lia-scripts-body-min.js:395
(anonymous function) @ lia-scripts-body-min.js:393
jQuery.each.jQuery.event.special.(anonymous function).handle @ lia-scripts-common-min.js:203
jQuery.event.dispatch @ lia-scripts-common-min.js:183
jQuery.event.add.elemData.handle.eventHandle @ lia-scripts-common-min.js:151
.......................
any updates on this???
