In-context help requirement

[GoogleCodeExporter]

There is a requirement to have in-context help, the idea being that if a user 
hovers their cursor over a field that has associated help, they are shown the 
help - an example is shown in the attached file.

For this to happen, a few things are required, some of which I need Asif to 
perform.

1. Asif. In the file WebContent/popup/createDataSpaceForm.xhtml, alter
<h:outputLabel for="dataspaceName">Database Name</h:outputLabel>
to
<h:outputLabel for="dataspaceName"><a class="tooltip" href="#">
Database Name<span class="custom help">
<img src="images/Help.png" alt="Help" height="48" width="48" 
/><em>Help</em>#{helpControler.setupHelpText('id3')}</span></a></h:outputLabel>
2. Enable uk.ac.ox.oucs.vidaas.session.HelpController to provide the required 
text to the xhtml
3. Add the following to the file stylesheet/theme.css at the bottom of the file:
.tooltip {
    border-bottom: 1px dotted #000000;
    color: #000000;
    outline: none;
    cursor: help;
    text-decoration: none;
    position: relative;
}

.tooltip span {
    margin-left: -999em;
    position: absolute;
}

.tooltip:hover span {
    border-radius: 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    position: absolute;
    left: 1em;
    top: 2em;
    z-index: 99;
    margin-left: 0;
    width: 250px;
}

.tooltip:hover img {
    border: 0;
    margin: -10px 0 0 -55px;
    float: left;
    position: absolute;
}

.tooltip:hover em {
    font-family: Candara, Tahoma, Geneva, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    padding: 0.2em 0 0.6em 0;
}

.classic {
    padding: 0.8em 1em;
}

.custom {
    padding: 0.5em 0.8em 0.8em 2em;
}

* html a:hover {
    background: transparent;
}

.classic {
    background: #FFFFAA;
    border: 1px solid #FFAD33;
}

.critical {
    background: #FFCCAA;
    border: 1px solid #FF3334;
}

.help {
    background: #9FDAEE;
    border: 1px solid #2BB0D7;
}

.warning {
    background: #FFFFAA;
    border: 1px solid #FFAD33;
}

Once this has been done, if a user hovers over the "Database Name" field in the 
create dataspace popup, they will see the text "popup", along similar lines to 
that shown in the attached file:
Here is some help text for id id3

I can then continue with the in-context help tags.

Original issue reported on code.google.com by thest...@gmail.com on 24 Jan 2012 at 4:21

Attachments:

• screen.png

[GoogleCodeExporter]

I'll handle this one.

Original comment by thest...@gmail.com on 1 Feb 2012 at 1:30

• Changed state: Accepted

[GoogleCodeExporter]

Sorted.

Original comment by thest...@gmail.com on 3 Feb 2012 at 10:34

• Changed state: Fixed