Tooltips makover – Siebel Open UI

Few weeks back I had published a post that showcased how you can use power of Siebel Open UI to actually implement tooltips for fields in List and Form applets in truly SRF independent way. If you haven’t gone through the post I would suggest doing that before continuing. You will also be able to see it in action next year in first ever Siebel Open UI book published by packt along with several other advanced example that allow to fully understand and use power of Open UI for creating truly wonderful User Experience. So, don’t forget to get your hands on as soon as one comes out (I know I will be getting one 🙂 ).

I felt it was good and really useful example but it lacked one thing ability to truly style the tooltips in the way you want. Let’s say for some fields I would like to emphasize the tooltip, for others I would like to appear it in red color so that user pay more attention to it or for some fields you would like to present it in blue (you get the point). I really wanted it to be flexible in terms of style so I started exploring ways to achieve it. Soon I realized that it would not be possible without a plugin and after some research I zeroed in on qTip2.

Here is what I have achieved with the plugin.

The starting point of our new solution will be the old solution. So, if you don’t have that handy download it from here

Before diving into the code let’s discuss the new structure of the JSON file :

TooltipPR.prototype.SetRenderer = function(){
var viewName = this.GetPM().GetName();
//pass view name so that we get only data for that view
var tipsObject = this._readTips(viewName);
var appletTipsObj = "", strTip = "", ctrlName = "", ctrlSelector = "", oCtrl = "",sTooltipSpan = "";
var oApplets = this.GetPM().GetAppletMap();
//run through all the applets in the view
for(var oApplet in oApplets){
appletTipsObj = tipsObject[oApplet]; //check if we have tooltip definition for this applet
if(typeof(appletTipsObj) === "object"){//if applet found
SiebelJS.Log("Processing Tips");//process the tooltip data
var appletProp = this._GetAppletProp(oApplets[oApplet].GetFullId()); //get the current applet id
var oControls = oApplets[oApplet].GetControls(); //get the controls
//run loop around all the controls in file for this applet
for(var tip in appletTipsObj){
strTip = appletTipsObj[tip]; //get the tooltip text
oCtrl = oControls[tip]; //get the control from the applet
if(typeof(oCtrl) === "object"){ // make sure specified control is found
sTooltipSpan = this.buildTooltip(strTip); //this is the new function to get tooltip data in span
ctrlSelector = this._GetControlListColSelector(appletProp, oCtrl.GetName()); //get the label selector
//append our image to control and add tooltip span next to image for tooltip to work
if(sTooltipSpan){ //process only if something's there
$(ctrlSelector).append("<img class='help-icon' height='12px' width='12px' src='images/help-icon.jpg' true=''/>" + sTooltipSpan);
}
}//end of if
}//end of for
}//end of if
else{
SiebelJS.Log("No Tips found for Applet :: " + oApplet );
}
}//end of for loop of applets
//initalize tooltip for our images
$("img.help-icon").each(function(){
$(this).qtip({
content: {
text: $(this).next('span') // Use the "span" element next to this for the content
},
style:{
classes: $(this).next('span').attr("class") + ' qtip-shadow'
}
});
});
};//end of setr

Following are the differences in code:

The way to get the tooltip text instead of straight processing we evaluate if it is an object or string and then create a span tag

The way tooltips are initialized. We are using a 3rd party plugin qTip2 for tooltips so the initialization based on it requirements.

Now something about qTip plugin

This is one of the leading tooltip plugin used across thousands of website. It supports HTML tooltips and offers plethora of features such as ajax, iframe, embedded videos etc. All I had to do was to include the JS and CSS file of this plugin and I was good to go.

On a side note I tried to use code from my last post to recreate it in my local and I ran into some issues. So this time I am sharing link of the actual JS file that is working on my local so that you don’t have to go through the same issues. You can download it by clicking here.

Below is video that shows the functionality in action along with another surprise functionality so don’t forget to watch till the end.

Eagerly waiting for your comments/suggestions/feedback. So, what are you waiting for?