Looking for info on how to creating a mouse over bubble

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:

1. Determine the message id associated with the subject.
2. Set up a tooltip for the subject
3. Make an ajax call to a custom endpoint to get the tooltip contents
4. Update the tooltip with the contents
5. 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