Forum Discussion
8 Replies
- AdamN13 years agoKhoros Oracle
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:
- Determine the message id associated with the subject.
- Set up a tooltip for the subject
- Make an ajax call to a custom endpoint to get the tooltip contents
- Update the tooltip with the contents
- Create the actual tooltip object
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
- Adam, is that how you all are doing it here in the Lithosphere? I'm noticing that it's in all of the (Li) forums that I've visited.
- AdamN13 years agoKhoros Oracle
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?
- AdamN12 years agoKhoros Oracle
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 ...
- Uncaught Cannot find tooltip for [object Object] lia-scripts-body-min.js:83
- Tooltip.$.extend.showlia-scripts-body-min.js:83
- (anonymous function)lia-scripts-body-min.js:81
- jQuery.event.special.(anonymous function).handlelia-scripts-common-min.js:203
- jQuery.event.dispatchlia-scripts-common-min.js:183
- elemData.handle.eventHandle
- AdamN12 years agoKhoros Oracle
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.
- irach1510 years agoMaven
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???
Related Content
- 9 months ago
- 2 years ago
- 2 years ago