Solution - Mouseover Tooltips (Scriptless) Part 2

This is the final article in our Impossible Tooltips challenge, if you have arrived here by accident, have a read of the precursor articles before going further.

1. Tooltips Challenge
2. Tooltips Solution Part 1
3. Tooltips Solution Part 2 (You are here)

The solution below has been freely available on the Impossible Siebel group for over a month now, and has been available to hundreds of people.

If you havnt already joined, or dont have a friend who is in the group to give you the inside information on our Siebel challenges, join now! There is no non disclosure agreement, take the information and share it.

Originally, I posted this tooltip challenge 6 months ago, but the seed for these articles started over a year ago, does any one remember the first Impossible Siebel poll? Interestingly the tooltip solution finished last on the results.


To quickly refresh your memory, in the last article, we injected artificial browser events into the label caption and used to HTML to display our Tooltips, but that solution had two drawbacks.

1) Unlimited text
2) Dynamic text

The more "important" issue here is the text length, but both these problems can be killed with one stone.

[Scriptless Solution]

The usefulness of the label caption is limited by its text length, but we can cheat by using a calculated field and put it in the position of the label, to act as the 'label' on the form applet.

This can be a little tricky, so we'll start with a basic example on how to implement this.


"<p onmouseover='alert(""Disco Forever"")'>Disco</p>"

Notice that with calculated fields, we need to enclose the expression with double quotes, and also escape any double quotes to become a pair of double quotes. There is no way to quickly simulate calculated fields, so an incorrect attempt at this expression may suggest that the idea dosnt work.

So here is our calculated field expression, with escaped quotes.

"<p onmouseover='var d=document.createElement(""div"");d.id=""t"";d.innerHTML=""Hey"";this.appendChild(d);' onmouseout='var d=document.getElementById(""t"");d.parentNode.removeChild(d);'>Disco</p>"

Create a field control, ensure that the control is set to dontencodedata and HTML Type is set to Plain Text. Map this control to your applet mode, compile these changes, and you'll notice that the real label and the calculated field behaves the same on surface value.

By using calculated fields, we can concatenate several other calculated fields together to get around the character limit, and by the nature of calculated fields, we can also take advantage of the fact that we can pull data dynamically through them. For example, we can retrieve other field values, get profile attributes, and even call business services.

However using calculated fields in this way will become incredibly complicated, especially if you have more than one field. Every field might have multiple concatenations, and the logic for creating and display the tooltips could be duplicated hundreds of times. Imagine having to change the style of the tooltip across the application, this will be quickly become unmaintainable.

This concept is only provided to illustrate that it can be done without scripting, but for practicality writing script in this case is much more sensible.

[Scripting Solution]

We will create two custom global browser script functions called showDiv() and hideDiv(), which will be fired by our artificial onmouseover and onmouseout events. This will offload the creation, as well as the styling of our tooltips, to a central place. Then all we need to do, is pass parameters to these functions, to display the tooltip.

The following example creates a really simple tooltip, but what you can do with it is only limited to your HTML skills.

Eg. you can make it float rather than append, you can add pictures, titles bars, rounded corners, play a sound etc.

Modify the calculated field, or Label to look like this:

"<p onmouseout=top.hideDiv(this) onmouseover=top.showDiv(this,'Hey')>Disco</p>"

In your Application browser script or business service, attach the following functions to your "top" object.

top.showDiv=function(that,m) {
var d=that.document.createElement("div");
d.id="Disco";
d.innerHTML=m;
that.appendChild(d);
}

top.hideDiv=function(that){
var d = that.document.getElementById("Disco");
if (d!=null) d.parentNode.removeChild(d);
}


The "expresssion" in this label caption uses about 80 characters, and still leaves a lot of room to display a useful tooltip without using multiple calculated fields, and if you dont require dynamic text, stick to using the label caption, otherwise the calculated field offers a bit more flexibility at the expense of maintenance.

You still can build some logic in the global showDiv() and hideDiv() functions to enable the label method to be a little dynamic, but it depends on how contexual you want your dynamic labels to be.

If you are one of those control freaks, then you also might want to offload the management of the tooltips text to a central location, rather than hardcoding the text as a parameter, we can hard code a reference to the label and perform a lookup.

A modified solution would look like this, create your calculated field as follows

"<p onmouseout=top.hideDiv(this) onmouseover=top.showDiv(this,'MyApplet.MyLabel')>Disco</p>"

In your Application browser script, change your showDiv function as so

top.showDiv=function(that,lov) {
var m = lookupValue("MY_LABEL_LOV_TYPE",lov);//lookupValue is a custom function that retrieves LOV values from the database.
var d=that.document.createElement("div");
d.id="Disco";
d.innerHTML=m;
that.appendChild(d);
}

This way BAU can change the labels without re-compiling the SRF, and provides clients in regulatory situations to quick adapt to changing needs.

[Floating, Appending, Positioning the tooltip]

The solution that i've provided above, appends the tooltip and positions it underneath the label, the position is always relative to the label. Some readers who i gave out the solution to, modified the solution to use absolute X,Y co-ordinates. I've also seen variations of my solution that have been modified to use <span> tags.

I've found that mouseovers dont work correctly on span tags in Siebel, so if you have problems with the mouseover not triggerring, try changing it to a <p> (paragragh tag).

Should you float or append? For short tooltips, appending is easier, because the solution is a lot less complex. When your text or styling makes the tooltip too big, it will start to push your controls out of alignment. To overcome this issue, you need to implement a floating tooltip, as seen on my screenshots on the original challenge.


[Dealing with the ActiveX]

The floating tooltip will not be effective, unless you deal with the ActiveX problem. Web professionals will know that elements on a web page can be layered, and each control can be set with a layer order to make it appear in front or behind another object.

ActiveX controls are a little different, because you cannot set the layer order on these type of controls, they just appear on top of everything else on the webpage. So if you try to implement a floating tooltip that lies in the path of a dropdown box or any other Siebel ActiveX control, your tooltip will be hidden by the control.

To get around this, we have to use a really obscure web developer trick, the "iframe technique".

var if=that.document.createElement("iframe");
if.id="iFrameDisco";
if.style.width = your tooltip width
if.style.height = your tooltip height
if.style.top = your tooltip Y position
if.style.left = your tooltip X position
if.style.zIndex='998';
if.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity=0)';

The above code creates an iframe of the same size as our tooltip, the next step is to create our tooltip to sit above this iframe (it is important that both the iframe and the tooltip are the same size).

This little trick allows our tooltip to float above the ActiveX controls in Siebel and is the same technique, that i've used in the ImposSiebel toolbar to float the AboutView dialog on top of the Siebel ActiveX elements.

[Conclusion]

This solution is unconventional, even if you consider the scriptless option, and depending on what kind of effect you are after, it can become very complex, but when used strategically, your users will be happier than any other siebel user in the world.

Keeping your users happy is very critical, and will be the subject of a series of future articles, but for now, the Siebel community can say that our million dollar system can do Tooltips!

Our regular readers probably saw this coming, but this is where we introduce a disco tune to the audience.



I cant think of a better disco tune than "One way ticket" to compliment this article, wether you like Neil Sedaka, Eruption or Boney M, this is a killer disco track.


12 comments:

  1. hi, i'm trying to use your solution, but i'm struggling with the activex solution to prevent the applet controls from going over the tooltip. could you please explicit a little better the use of the activex control inside your example? thanks very much.

    ReplyDelete
  2. Hi Beso, there is example code that creates the iframe in the article, just float your tooltip ontop of this layer.

    ReplyDelete
  3. Hey form applet is very easy to customized with DHTML tricks, what about the List Applet?

    ReplyDelete
  4. the list applet is mostly 1 huge activeX control, if you want to abuse it, wait for siebel open ui =)

    ReplyDelete
  5. While using Top object in application browser script, it is giving error:
    Object doesn't support this property or method

    ReplyDelete
  6. It should be "top" not Top. If you are using it from a popup window, you may need "opener.top"

    ReplyDelete
  7. Hi,

    I have got below requirement.
    "In all list applets throughout Siebel, when hovering the cursor over a field, a tooltip box pops up showing the full text of that field. This pop up box disappears about 10 seconds later which is not long enough to read all the text. The system shall remove any timeout restriction, and keep the tooltip box displaying indefinitely (until the mouse is moved off the field)."

    Can you please help me how to achieve this functionality

    ReplyDelete
  8. I can't endorse such measures, but there is a similiar registry solution for tooltip delay here, that might work for IE.

    http://answers.microsoft.com/en-us/windows/forum/windows_vista-performance/possible-to-change-tooltips-delay/ec72571c-5bc4-4192-a762-8a1240eaf7b3

    ReplyDelete
  9. Hi Jason,
    Many thanks for sharing this with us.
    Can you please publish more details code about the ActiveX floating approach? How must I integrate the tooltip into the iFrame?
    I'm struggling with this. Maybe you could share the sample code how you created the "black" tooltip on the screenshot above?
    This would be great!
    Many thanks
    Alen

    ReplyDelete
  10. Hi Alen

    There is a code sample in the article under the title "Dealing with the ActiveX".

    This tooltip concept was built and most of the materials were discarded afterwards. The example that I built, used box gradient image as the background, and I formatted the HTML to fit into this space. I'm not able to provide any more detail than I already have.

    It is also not something that I recommend you put into production.

    ReplyDelete
  11. Hi Jason,
    Can you please let us know if there is a solution which works in SI applications like Siebel eCustomer.

    ReplyDelete
  12. Hi Vali,

    The same technique can be used for SI applications. It should be easier, because you dont have to deal with ActiveX.

    ReplyDelete

Comments are open to all, please make it constructive.