SARK UCS/MVP Tool Tips and the Tool Tip Edit Panel

SARK UCS/MVP Tool Tips are used to provide dynamic help content and to allow users to modify SARK panels

How Tool Tips work.

SARK UCS/MVP 2.2.4 and 2.3.2 support CSS Tool Tips. When the mouse is hovered over a an activated description then a help bubble will appear (see above). The Tool Tip text is kept in a database and users can freely augment or replace the SARK UCS/MVP provided help text. Additionally, the main Headings in each panel also use the Tool Tip Database for their text. Thus it is possible to change the help text, the variable descriptions and the panel headings, perhaps in a language other than English.

Adding and changing Tool Tips is non-destructive because the system keeps 2 Tool Tip databases; the underlying database is called CORE, while the user database is called USER. Whenever you modify a CORE entry, the new version is saved in USER. Thus although the SARK UCS/MVP entries may change over time, this should not affect your modified versions. Also, becasue the modified versions are in a separate file, it is trivial to move them between systems.

Tool Tip Edit Panel

The Tool Tips included in the SARK UCS/MVP base install are all in English. However, you may modify these as you see fit. Your modified Tool Tips will be stored in the USER database (see below). You can see where the current entry resides by looking at the SOURCE column in the table... The user database itself can be found at /home/e-smith/db/tthelp.user. You can freely copy your modifications between SARK UCS/MVP systems, perhaps by using a USB pen drive or similar. This allows you to quickly customize new or existing installations with your own modifications.

If the SOURCE returns "Core" then the system is using the SARK UCS/MVP supplied Tool Tip. If it returns "User" then the system is using a user supplied Tool Tip.

Modifying a Tool Tip

You can change both the Tool Tip Narrative and the Display Name (or Legend) for the variable in question. By changing the Display Name you can effectively change the language of the Panel to suit yout audience.

How it works

The CSS

a.tt{
    position:relative;
    z-index:24;
    color:#000000;
    font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/

a.tt:hover{ z-index:25; color: #ff3300; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
        padding: 15px 0 0 0;
        width:200px;
        color: #993300;
        text-align: center;
        filter: alpha(opacity:90);
        KHTMLOpacity: 0.90;
        MozOpacity: 0.90;
        opacity: 0.90;
}
a.tt:hover span.top{
        display: block;
        padding: 30px 8px 0;
       background: url(/server-common/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
        display: block;
        padding: 0 8px;
        background: url(/server-common/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
        display: block;
        padding:3px 8px 10px;
        color: #548912;
       background: url(/server-common/bubble.gif) no-repeat bottom;
}

The Images

bubble.gif

bubble_filler.gif

-

Displaying a horizontal heading, its help text and associated data variable

 print $q->Tr (

                $q->td ({-class => "sme-wide-label"}, "LOGOPTS"),   
                <span class=\"tooltip\"><span class=\"top\">
                </span><span class=\"middle\"> MY TOOLTIP HELP TEXT - IT CAN BE AS LONG AS I WANT 
                AND I CAN EMBED <i>HTML</i> IN IT IF I NEED TO
                </span><span class=\"bottom\"></span></span></a>"),

               $q->td ({-class => "sme-noborders-content"},
                $q->popup_menu  (
                        -name     => 'LOGOPTS',
                        -values   => [@Lvalues ],
                        -default  => $logopts)));