Solution - Mouseover Tooltips (Scriptless) Part 1

I've been receiving a lot of requests from Siebel professionals to provide the solution to the tooltips challenge, and though i've provided the solution privately to needing customers, i've realised that implementing it can be tricky, so in this article so i'll provide a walkthrough of the fundamental configuration needed to achieve a basic solution.

[Background]

To provide some perspective on this problem, lets have a look at a real life scenario from a customer on the Oracle forums.

"We have been struggling with a user request:

The users have requested that we change default Siebel Tooltip behavior so that if we hover the mouse over some select fields(In this case a credit code, among others) that the tooltip contain information that can help the user to understand the value. Whether this is the definition of the actual value or a short list of actual values is still up for debate. Alternate approaches like populating the status bar with a value, theoretically the definition of the current value, and providing a help icon with a tooltip or message that contains reference info for the column below, have been discussed, but these are not preferred.

So has anyone ever tried to highjack the tooltip functionality? I'm not going to say that the existing functionality (Displaying the full value of the current field) isn't useful in many cases, but that functionality is useful for the codes that we are looking at(WHich are typically smaller then the existing field) and this would be a far better use of the functionality.
"

source: http://forums.oracle.com/forums/thread.jspa?threadID=577955&tstart=525

[Million dollar system]

The Siebel UI can be quite overwhelming, so its understandable that business want to implement tooltips, to provide its users with visual clues and help the user perform their duties. This is the one requirement that every BA has asked once in their Siebel career.

But when the business ask for a simple feature such as floating tooltips, and we say its not possible. It becomes a little embarasing, when they ask why a system, they've spent millions of dollars on, cant offer tooltips, which have been around since the beginning of the web.

[Workaround]

A primitive technical solution to this, is to utilise the caption override on the label, and hard code text into the alt or title attributes.
<span alt='Disco Forever'>Disco</a>

This dosnt meet the requirement of the impossible challenge, but it also has an annoying side effect, in that the tooltip vanishes too soon. So if you want to provide a few lines of text for the user to read, they'll have roughly 5 seconds to read it all, before it disappears.

Some readers have reasonably guessed that we need to use the onmouseover and onmouseout events in browser script control events to deliver this solution, as it is the most obvious mechanism to create a floating dialog, however the only problem is, these browser events are not available in HI environments, and it also involves scripting.

But read on, and i'll show you how to bypass these obstacles.

[Solution]

To get around the HI browser events limitation, we can inject custom onmouseover and onmouseout events on the label caption as so.
<p onmouseover='<Show our tooltip>' onmouseout='<Hide our tooltip>'>Disco</p>

This lays the foundation for the rest of the challenge, and offers us the launchpad to use some HTML magic to display our tooltips.

Here is the caption override that is needed to display a tooltip.
<p onmouseover='var d=document.createElement("div");d.id="t";d.innerHTML="yeah";this.appendChild(d);' onmouseout='var d = document.getElementById("t");d.parentNode.removeChild(d);'>Disco</p>

What the above syntax does, is creates a DIV element on the fly and injects it underneath the current object, which in this case is our field label object.

Our label now has two custom events that will fire off code to display and hide the tooltip accordingly. The tooltip will hang around as long as the mouse cursor is hovered over the label, and disappear swiftly when the mouse moves away.

But lets not celebrate so soon, because this solution has the following draw backs, the tooltip text is limited by the repository length of the caption field, our creativity with the tooltips is also severely limited by the caption length, and hard coding the text here would make it difficult to maintain.

We can dress it up by adding a little style
<p onmouseover='var d=document.createElement("div");d.id="t";d.innerHTML="yeah";d.style.backgroundColor="red";d.style.borderColor="black";this.appendChild(d);' onmouseout='var d=document.getElementById("t");d.parentNode.removeChild(d);'>Disco</p>

This looks a little better, but uses it up every (255) valuable character, and leaves no room for a useful tooltip.

This is the most "vanilla" result, and is not very useful, but it does provide the basic framework for others wishing to get further with this challenge.

[Until next week]

The most important hurdles have been taken away

1) Mechanism to Display/hide a persistent floating tooltip
2) Achieved by using a caption "expression" and hence Scriptless

But the following aspects of the challenge remain un-met

3) Unlimited text
4) Dynamic text

In the next article, i'll provide the full solution and bust the myth that Siebel cant do tooltips.


Reactions:

5 comments:

  1. Hi Jason,

    Great start.. I just hope that next article doesn't as long as first article...

    waiting eagerly...

    ReplyDelete
  2. Hi Neel,

    Sorry to dissappoint, but the final article is twice as long as this one =)

    ReplyDelete
  3. I was talking about the wait time for the next article.

    I hope by "twice as long" you meant the length of the article and not the time we have to wait :)

    length is longer the better....

    ReplyDelete
  4. Hi Jason Le,

    was looking for something like this. The 5-second ToolTip is enough for our needs.
    However I am using TITLE instead of ALT since ALT is not meant for tooltips originally.

    Thanks !

    ReplyDelete

Comments are open to all, please make it constructive.