Tool Tip line breaks

I know the "tool tips" should be brief, but I got a long one, and a line break would make it more readable.
Is there a way to add a line break in NIB object's Help "Tool tip" property? Some sort of keystroke like Shift-Return?
Presently I edit the Tool Tip text in a word processor, add Returns where I want, and then copy and paste into the Tool Tip field. Works fine, but I wonder if there is an "inline" alternative?
John

Is there a way to add a line break in NIB object's
Help "Tool tip" property? Some sort of keystroke like
Shift-Return?
Try Option + Return

Similar Messages

How can I break the tool tips (tip strips) into to seveal lines?

I use the tip in "Description and tip..." to display tool tips (tooltips, tip strips, help cues, the little yellow strips with helpful information about a control). Some of the help messages are long, but the tips are still displayed on one line. In some cases the whole text can not be read because the tip is wider than the screen. I would like to be able to specify a maximum width of the tip, or to be able to manually insert line breaks.

Hi Nick
Actually, I write multiline string up to 256 char long in worpad. Then, I copy and paste into de tip dialog from pop up menu and it works fine.
Hope it helps.
Alipio
"Qod natura non dat, Salmantica non praestat"

Add line break in Configurator tool tip?

Just started using the Configurator, what a great idea.
My first attempts at tool tips often get lengthy. If the width of the panel is not wide enough, resulting tips get truncated/munged.
Is there a way to insert line breaks in tips so that they can be seen in total on a "skinny" panel? Or is there another approach?

almeck wrote:
Or is there another approach?
Keep them short!

Multi line tool tip in ABAP Web Dynpro

Hello experts,
do you know a possibility to apply a multi-line tool tip to a ui element in abap web dynpro ?
The OTR compresses multiple lines to one long line...
Thanks in advance.

This is not a forum for application specific questions. [Web Dynpro|Web Dynpro Java; , BSP , CRM development, ... have their own forums.

Multi-Line Tool Tip

Greetings<p>
I want to have a multi line tool tip generated from database table fields.<p>
Currently I'm using #{datasource.currentRow["FieldName1"]}, #{datasource.currentRow["FieldName2"]} etc., but some of the strings in the field are rather long.<p>
I have tried placing a \n within a constant string (i.e. "constant\nstring") and it shows up just like that.<p>
Any suggestions ?<p>
Thx,<p>
Jim

Hi Jim,
Please go through the following thread and see if it helps you:
http://swforum.sun.com/jive/thread.jspa?forumID=123&threadID=52787
Cheers
Giri

Multi line ballon tool tip

I have used ballon toolip, it have multiple lines to show the tool tip, but it is not working.
I have added Component in bolloon tool tip to show multi line text , but still not showing correctly.

aanu wrote:
But it not works fine.
Please suggest me the way .
THE WAY
1) Tell us what "not works fine" is supposed to mean.
2) Tell use what the hell balloon tip means. Where did you get this? How do you call it?
3) Post your code. USE FORMATTING TAGS. At least some code to give anyone a clue of what you are doing.
4) Next time post into the correct forum.
It never fails to amaze me when asked for more useful details people respond as you did here. By repeating, ad nauseum, information that was already clear but doesn't actually tell anything. Yes. We got that "it" only displays one line. But you didn't answer any of the questions asked which relate to what the hell is "it" and how the hell are you calling "it". etc.

Multi line tool tip / OTR text

Hello experts,
do you know a possibility to apply a multi-line tool tip to a ui element in abap web dynpro ?
The OTR compresses multiple lines to one long line...
Thanks in advance.

Hi,
I realize this is a very old thread, but in case others, like myself, finds it, here's a simple fix for this. In the OTR text add a constant for the desired linefeed - for example "\n":
Alias ZPACKAGE/ALIAS: Line 1\nLine 2
* Generate tooltip text
DATA:
lo_el_ui TYPE REF TO if_wd_context_element,
lv_tooltip TYPE string.
lv_tooltip = cl_wd_utilities=>get_otr_text_by_alias( 'ZPACKAGE/ALIAS' ).
REPLACE ALL OCCURRENCES OF '\n' IN lv_tooltip WITH cl_abap_char_utilities=>newline.
lo_el_ui->set_attribute( name = 'TOOLTIP' value = lv_tooltip ).
The same technique can be used for tabulators (using constant
cl_abap_char_utilities=>horizontal_tab), however, there's no guarantee how this will presented in the browser.
Best regards,
Jacob Laursen

Tool Tips

I was wondering if there was a way to make the tool tips have multiple lines of text. I tried creating a string with \n for line breaks and it seemed to do nothing. thank you!

You can use html text for the Tooltip.
button.setToolTipText("<html>multi<br>line</html>");

Acrobat v9 JavaScript Alert Box - any way to add space or line break after each array item?

I have a Document level Javascript used to identify blank required fields and is triggered on document actions, Print and Save. The script identifies the blank required fields, counts them, and outputs to an Alert box indicating the number of required fields blank and lists the fields by tooltip name. The script identifies the required fields by an asterisk at the end of each tool tip.
My question is there any way to add a space or a line break after the comma for each listed item?
Here is an image of the output where the listed items are all run together.
Here is the code:
function validateFields()
//a counter for the number of empty fields
var flg = 0
// count all the form fields
var n = this.numFields
//create an array to contain the names of required fields
//if they are determined to be empty
var fArr = new Array();
//loop through all fields and check for those that are required
// all fields that have a '*' in their tool tip are required
for(var i = 0;i<n;i++){
var fn = this.getNthFieldName(i);
var f = this.getField(fn);
//tool tip is the fields\'s 'userName' property;
var tt = f.userName
//test for the '*';
if(tt.indexOf('*')!=-1 && f.value == f.defaultValue){
//increment the counter of empty fields;
flg++;
//add the fields userName (tool tip) to the list of empty field names;
fArr[fArr.length] = tt;
//now display a message if there are empty fields
if(flg>0){
app.alert('There are '+flg+' fields that require a value\n\n'+ fArr,3)
else{
this.print();

Thank you! The alert box array items now have a line break, image below. You know you have made my day and possibly several weeks as now I have more understanding about how to apply everything I have been reading in the Acrobat JavaScript guide and of course as soon as you pointed out using a "join", that triggered some old-days of working with Access and SQL queries.
I will work on the required attribute to see how I might reference it. I am laughing at myself now - good luck to me in figuring it out as I was very stick-in-the-mud regarding the line break issue.
Thanks again and here is the result of the updated code:

LE7:Score Layout:Global Format:Maximum Bars per Line - Line Break Bug!

Hello
This problem occurs in Logic Express version 7.
(I am using MacOS version 10.4.2 on an eMac)
I am currently compiling and editing a large score for a big band composition consisting of 22 parts:
Flute 1
Flute 2
Clarinet 1
Clarinet 2
Alto Sax 1
Alto Sax 2
Tenor Sax 1
Tenor Sax 2
Baritone Sax
Trombone 1
Trombone 2
Trombone 3
Trombone 4
Trumpet 1
Trumpet 2
Trumpet 3
Trumpet 4
Guitar
Keyboard
Electric Bass
Percussion 1 (Kit)
Percussion 2 (Aux)
I am creating the score in a separate file, and I am combining parts into 1 stave each by instrument like this:
Flute 1 & 2
Clarinet 1 & 2
Alto Sax 1 & 2
Tenor Sax 1 & 2
Baritone Sax
Trombone 1 - 4
Trumpet 1 - 4
Guitar
Keyboard (2 staves)
Bass
Percussion
Each instrument, with the exception of keyboard which has 2 staves, consists of one stave, making up systems of twelve staves each. By sizing down each score style to 2,
I have managed to fit 2 systems onto each page, therefore significantly reducing the amount of paper needed.
The problem comes when organising the layout of my score,
in particular, the line breaks. Using layout:global format, I have limited the maximum number of bars per line to 8, both in the page edit and normal score mode.
I am trying to divide up my score so that there are 8 bars per system. Using the white arrow tool, I am dragging bars up and down in order to achieve this.
However, when I get 30 odd bars in, I discover a system with 12 bars crammed into it - and even printing it off, it is clear that the system could benefit with less bars; the notation is squashed up together and not very easy to read.
THIS IS THE ACTUAL PROBLEM:
So I tried using the white arrow to move the last 4 bars down onto the next system, and a bug occurs where I end up with about 20 bars on the system, oddly distorted, the first few bars of which are squashed up together at the beginning of the line, and the last bar of which is stretched far off the right hand side of the page out of view. Then the next 20 or so bars are no where to be seen (probably far off the right hand side of the page) before the system below.
If you dont know what I am talking about, I could provide a screenshot if you request.
I have tried everything to get 8 bars on that particular system; dragging the stretched bar downwards, dragging squashed bars downward, moving bars down 1 by 1, moving bars onto the system above, moving bars away from the system below (to make room for the 4 bars that I want to move from above), adding more bars and dragging them down, but none of these methods have worked. I am either stuck with 12 bars crammed onto one system and 4 bars on the next or an oddly distorted version of the system which cannot possibly be read. Even when I settle with the unsatistactory former, I encounter further problems on subsequent systems below, some systems of which are already distorted.
All I want is to have 8 bars per system, it should not be too much to ask! The layout:global format:maximum-bars-per-line calculation seems to be redundant, even when I reset the default line breaks - it just does not automatically set 8 bars per line, which it should do. Is there not an option to determine bars individually by number onto their respective lines, without having to use the white arrow graphic layout tool?
The problem is extremely frustrating, and it is preventing me from completing, presenting and handing in a score for my university music composition.
I have no other score producing software, and starting it
from scratch on paper is going to take me weeks, because it consists of 830 12/8 bars in 22 parts, and I need to get it ready by next term!
Any help would be extremely helpful and much appreciated, especially a patch or a useful way round. It could be related to memory, or hard drive space, as I have experienced similar problems in the past, where my score has been stretched off the page during a time when I have had little disk space...and this is a very large piece of music which might stretch the score capabilities of Logic.
If so, has anyone got any suggestions?
Thanks!
Rory
eMac Mac OS X (10.4.2)
eMac Mac OS X (10.4.2)

nope just cutting should work.
here are some things to try:
1. try assigning a different score style. for the regions. duplicate and then adjust the default ones if necessary.
2. try creating a new instrument set. in fact delete them and make a new one (use the key command: create instrument set from selected)
3. it may be a formatting problem so check:
in global layout constant spacing (try 8 or 9) and proportional spacing (try 45 or so). then try factory defaults.
4. try copying and pasting the midi into a brand new region and looking at the score for that.
5. try fiddling with the layout tool drqagging bars up or down.
normally simply cutting the region of just one object is enough to force a redraw. maybe try it on all of the regions. what happens when you double click on a region?

Dynamic Values in Business Graphics Tool Tip

hi,
I am using business graphics ui element in my webdynpro application.I am able to get the graghical output correctly.I want to have tool tip in my graph so when I place the cursor on a point, the tool tip should give the corresponding value.I have used the following code
try
     String[] catLabels = {
                    "Team 1", "\1Tomoko Akino", "\1Hans Bosch", "\1Marvin Smith",
                    "Team 2", "\1Jose Vega", "\1Bao Yin", "Out of office" };
        String[][] pointCustomizing = {
                    { "approved", "cancelled", "approvedPartTime" },
                    { "approved" },
                    { "approved" },
                    { "sent", "approvedPartTime", "notsentPartTime", "notsent"},
                    { "approved", "zSeveralEntries", "zSeveralEntries",
                      "zSeveralEntries", "zSeveralEntries", "zSeveralEntries",
                      "zSeveralEntries" },
                    { "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                      "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                      "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                      "outOfOffice", "outOfOffice", "outOfOffice" }
        String[][] pointLabels = {
                    { "1", "2", "2", "2", "4", "3", "3", "3", "1", "1", "2", "1",
                      "2", "1", "1" }
        String[][][] timeValues = {
                    { { "20020528", "20020606" }, { "20020606", "20020608" },
                      { "20020610", "20020611" } },
                    { { "20020531", "20020606" } },
                    { { "20020607", "20020613" } },
                    { { "20020527", "20020601" }, { "20020606", "20020607" },
                      { "20020612", "20020613" }, { "20020617", "20020619"} },
                    { { "20020531", "20020606" }, { "20020531", "20020601" },
                      { "20020601", "20020602" }, { "20020602", "20020603" },
                      { "20020603", "20020604" }, { "20020604", "20020605" },
                      { "20020605", "20020606" } },
                    { { "20020527", "20020528" }, { "20020528", "20020529" },
                      { "20020529", "20020530" }, { "20020530", "20020531" },
                      { "20020531", "20020601" }, { "20020603", "20020604" },
                      { "20020604", "20020605" }, { "20020605", "20020606" },
                      { "20020606", "20020607" }, { "20020607", "20020608" },
                      { "20020610", "20020611" }, { "20020611", "20020612" },
                      { "20020612", "20020613" }, { "20020617", "20020618" },
                      { "20020618", "20020619" }}
        String s[]={"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14",};
        IPrivateSBusinessGraphicsSampleView.ICategoryNode catNode = wdContext.nodeCategory();
        for (int catIndex = 0; catIndex < catLabels.length; ++catIndex)
           IPrivateSBusinessGraphicsSampleView.ICategoryElement catElement = catNode.createCategoryElement();
           catNode.addElement(catElement);
           catElement.setDescription(catLabels[catIndex]);
        // loop over series
        IPrivateSBusinessGraphicsSampleView.ISeriesNode seriesNode = wdContext.nodeSeries();
        for (int seriesIndex = 0; seriesIndex < timeValues.length; ++seriesIndex)
           IPrivateSBusinessGraphicsSampleView.ISeriesElement seriesElement = seriesNode.createSeriesElement();
           seriesNode.addElement(seriesElement);
           // set series attributes (...)
           IPrivateSBusinessGraphicsSampleView.IPointNode pointNode = seriesElement.nodePoint();
           // loop over points
           for (int pointIndex = 0; pointIndex < timeValues[seriesIndex].length; ++pointIndex)
             IPrivateSBusinessGraphicsSampleView.IPointElement
                       pointElement = pointNode.createPointElement();
             pointNode.addElement(pointElement);
             String ename = s[pointIndex];
             wdComponentAPI.getMessageManager().reportSuccess("name:"+ename);
             pointElement.setStartValue(timeValues[seriesIndex][pointIndex][0]);
             pointElement.setEndValue(timeValues[seriesIndex][pointIndex][1]);
             pointElement.setCuId(pointCustomizing[seriesIndex][pointIndex]);
             pointElement.setLabel(pointLabels[seriesIndex][pointIndex]);
             pointElement.setToolTip(ename );
     catch(Exception e)
             wdComponentAPI.getMessageManager().reportSuccess("exc2:"+e);
By the above code ,I am getting the tool tip with the value "a" in all locations.
But I need to have different values in the tooltip corresponding to the location.
Please Help....
Thanks in advance,
Shamila

hi,
Still I did not get the dynamic tool tip..........
In wdDoInit() I have written the following code
try
     String[] catLabels = { "Team 1", "\1Tomoko Akino", "\1Hans Bosch", "\1Marvin Smith",
               "Team 2", "\1Jose Vega", "\1Bao Yin", "Out of office" };
        String[][] pointCustomizing = {
                    { "approved", "cancelled", "approvedPartTime" },
                    { "approved" },
                    { "approved" },
                    { "sent", "approvedPartTime", "notsentPartTime", "notsent"},
                    { "approved", "zSeveralEntries", "zSeveralEntries",
                      "zSeveralEntries", "zSeveralEntries", "zSeveralEntries",
                      "zSeveralEntries" },
                    { "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                      "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                      "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                      "outOfOffice", "outOfOffice", "outOfOffice" } };
                String[][] pointLabels = {{ " ", " ", " " },{ " " },{ " " },{ " ", " ", " ", " "},{ " ", " ", " ", " ", " ", " ", " " },
                              { "1", "2", "2", "2", "4", "3", "3", "3", "1", "1", "2", "1", "2", "1", "1" } };
              String[][][] timeValues = {{        { "20020528", "20020606" },
                      { "20020606", "20020608" },
                      { "20020610", "20020611" } },
                    { { "20020531", "20020606" } },
                    {   { "20020607", "20020613" } },
                    {   { "20020527", "20020601" },
                      { "20020606", "20020607" },
                      { "20020612", "20020613" },
                      { "20020617", "20020619"} },
                    { { "20020531", "20020606" }, { "20020531", "20020601" },
                      { "20020601", "20020602" }, { "20020602", "20020603" },
                      { "20020603", "20020604" }, { "20020604", "20020605" },
                      { "20020605", "20020606" } },
                    { { "20020527", "20020528" }, { "20020528", "20020529" },
                      { "20020529", "20020530" }, { "20020530", "20020531" },
                      { "20020531", "20020601" }, { "20020603", "20020604" },
                      { "20020604", "20020605" }, { "20020605", "20020606" },
                      { "20020606", "20020607" }, { "20020607", "20020608" },
                      { "20020610", "20020611" }, { "20020611", "20020612" },
                      { "20020612", "20020613" }, { "20020617", "20020618" },
                      { "20020618", "20020619" }} };
        String s[]={"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14",};
        IPrivateSBusinessGraphicsSampleView.ICategoryNode catNode = wdContext.nodeCategory();
        IPrivateSBusinessGraphicsSampleView.ICategoryElement catElement;
        for (int catIndex = 0; catIndex < catLabels.length; ++catIndex)
            catElement = catNode.createCategoryElement();
           catNode.addElement(catElement);
           catElement.setDescription(catLabels[catIndex]);
         // loop over series
        IPrivateSBusinessGraphicsSampleView.ISeriesNode seriesNode = wdContext.nodeSeries();
        for (int seriesIndex = 0; seriesIndex < timeValues.length; ++seriesIndex)
           IPrivateSBusinessGraphicsSampleView.ISeriesElement seriesElement = seriesNode.createSeriesElement();
           seriesNode.addElement(seriesElement);
           // set series attributes (...)
           IPrivateSBusinessGraphicsSampleView.IPointNode pointNode = seriesElement.nodePoint();
           IPrivateSBusinessGraphicsSampleView.IPointElement pointElement;
           // loop over points
           for (int pointIndex = 0; pointIndex < timeValues[seriesIndex].length; pointIndex++)
             //IPrivateSBusinessGraphicsSampleView.IPointElement
             pointElement = pointNode.createPointElement();
             pointNode.addElement(pointElement);
             String ename = s[pointIndex];
              wdComponentAPI.getMessageManager().reportSuccess("name:"+ename);
             pointElement.setStartValue(timeValues[seriesIndex][pointIndex][0]);
             pointElement.setEndValue(timeValues[seriesIndex][pointIndex][1]);
             pointElement.setCuId(pointCustomizing[seriesIndex][pointIndex]);
             pointElement.setLabel(pointLabels[seriesIndex][pointIndex]);
              pointElement.setToolTip(ename );
catch(Exception e){        wdComponentAPI.getMessageManager().reportSuccess("exc2:"+e);    }
In wdDoModifyView() I have written the following code
try
     IWDBusinessGraphics graph = (IWDBusinessGraphics)view.getElement("BusinessGraphics");
     IWDAbstractSeries allSeries[] = graph.getSeriesList();
     IWDSimpleSeries series;
     wdThis.wdGetAPI().getComponent().getMessageManager().reportSuccess("length : "+allSeries.length+" value:"+allSeries[0]);
     for(int j=0;j<allSeries.length;j++)
       series = (IWDSimpleSeries)allSeries[j];
      for(int i=0;j<wdContext.nodeSeries().size();i++)
          wdContext.nodeSeries().setLeadSelection(i);
          series.setTooltip(series.getValue());
catch(Exception e)
     wdThis.wdGetAPI().getComponent().getMessageManager().reportSuccess("exc modify :"+e);
The node structure is
Root Node
>Category>Description
>Series>Point-->CuId
>Series>Point-->endvalue
>Series>Point -->Startvalue
>Series>Point -->label
>Series>Point --->Tooltip
In BusinessGraphis seriesSource-Series node ,tooltip-Series.Point.ToolTip is mapped
In Category description-Category.Description is mapped
In Series pointsource-Series.Point, tooltip-series.point.tooltip is mapped
In Point CustomisingId-eries.point.cuId.label-Series.label, tooltip-series.point.Tooltip,valuesource -series.point is mapped
In Numericvalue value-series.point.startvalue is mapped
In Numericvalue value-series.point.endvalue is mapped
When I deploy my application I am getting <b>java.lang.ClassCastException</b> Exception at the line <b>series = (IWDSimpleSeries)allSeries[j];</b>
What is reaseon?.....
Please help..............
I want to get dynamic value in the tool tip of the graph.
Thanks in advance,
Shamila,

Spry tool tip does not work in template or child pages within an editable region. Why not?

Ok. so I am getting pretty frustrated. I take the time to learn how to use CSS and to create a template page for a Contractor Site (www.ContractorInsurance.net). The idea is to create a page that I can use for different classes of Contractors...right?
Then I get all happy about being able to insert ToolTip onto pages to help the user. Great!
LIfe to turn to Sorrow after nearly five hours of searching for a "eeking" answer.
So what good does it do to have an Editable region to update if we cannot have the flexibility to insert a tool tip on child pages? Ok so the fast solution is to what... Have a question mark image, insert another apDiv, name it toolTip_Not and provide it with a show=hide behavior?
RRRRRrrr...
This really sucks not being able to find a solution within a reasonable amount of time.

I have tried thank you. However...it is still not working.
www.ContractorInsurance.net/course_of_construction.php
The error message is "Making this change would require code that is locked by a template translator"
Re: Spry tool tip does not work in template or child pages within an editable region. Why not?
created by altruistic gramps in Spry Framework for Ajax - View the full discussion
If you have a look at the following simple document with a tooltipTooltip trigger goes here.
Tooltip content goes here.
you will notice that a couple of lines have been placed in the HEAD section of the document. When using DW templates, the HEAD section is usually not editable, hence the error mesaage. By default, your template should have an editable region in it just before the closing tag. It looks like this:  Dreamweaver should be able to find that editable region and insert the
<script> tag there automatically. Because you don't have an editable region like that in the <head>, open the master template, and paste the code above just before the closing </head>
tag. Gramps
Edited to remove personal data

Tool tip to not move

Hi I'm a big fan. long time lurker first time poster
Currently the position of the tool tip depends on where the cursor first hovers over the image. Is there a way for the tool tip to appear in the same place no mater where the image is hovered?
below is the js and css
thanks
// SpryTooltip.js - version 0.9 - Spry 1.6.1
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
if(parseFloat(r[2]) < 420)
this.version = 2;
else
this.version = 3;
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.Widget.BrowserSniff();
Spry.Widget.Tooltip = function(tooltip_element, trigger_selector, options)
options = Spry.Widget.Utils.firstValid(options, {});
this.init(trigger_selector, tooltip_element, options);
if (Spry.Widget.Tooltip.onloadDidFire)
this.attachBehaviors();
Spry.Widget.Tooltip.loadQueue.push(this);
Spry.Widget.Tooltip.prototype.init = function(trigger_element, tooltip_element, options)
var Utils = Spry.Widget.Utils;
this.triggerElements = Utils.getElementsByClassName(trigger_element);
this.tooltipElement = Utils.getElement(tooltip_element);
options.showDelay = parseInt(Utils.firstValid(options.showDelay, 0), 10);
options.hideDelay = parseInt(Utils.firstValid(options.hideDelay, 0), 10);
if (typeof this.triggerElements == 'undefined' || !(this.triggerElements.length > 0))
this.showError('The element(s) "' + trigger_element + '" do not exist in the page');
return false;
if (typeof this.tooltipElement == 'undefined' || !this.tooltipElement)
this.showError('The element "' + tooltip_element + '" do not exists in the page');
return false;
this.listenersAttached = false;
this.hoverClass = "";
this.followMouse = false;
this.offsetX = 15;
this.offsetY = 15;
this.closeOnTooltipLeave = false;
this.useEffect = false;
Utils.setOptions(this, options);
this.animator = null;
for (var i =0; i < this.triggerElements.length; i++)
if (!this.triggerElements[i].className)
this.triggerElements[i].className = '';
if (this.useEffect){
switch (this.useEffect.toString().toLowerCase()){
case 'blind': this.useEffect = 'Blind'; break;
case 'fade': this.useEffect = 'Fade'; break;
default:
this.useEffect = false;
this.visibleTooltip = false;
// Hack for FF 3 - Safari 3: force painting of the element, in order to have the correct display
this.tooltipElement.offsetHeight;
// Optimisation: save browser work if display is already 'none'
if (Spry.Widget.Utils.getStyleProperty(this.tooltipElement, 'display') != 'none')
this.tooltipElement.style.display = 'none';
if (typeof this.offsetX != 'numeric')
this.offsetX = parseInt(this.offsetX, 10);
if (isNaN(this.offsetX))
this.offsetX = 0;
if (typeof this.offsetY != 'numeric')
this.offsetY = parseInt(this.offsetY, 10);
if (isNaN(this.offsetY))
this.offsetY = 0;
this.tooltipElement.style.position = 'absolute';
this.tooltipElement.style.top = '0px';
this.tooltipElement.style.left = '0px';
Spry.Widget.Tooltip.onloadDidFire = false;
Spry.Widget.Tooltip.loadQueue = [];
Spry.Widget.Tooltip.addLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('load', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onload', handler);
Spry.Widget.Tooltip.processLoadQueue = function(handler)
Spry.Widget.Tooltip.onloadDidFire = true;
var q = Spry.Widget.Tooltip.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++)
if (!q[i].listenersAttached)
q[i].attachBehaviors();
Spry.Widget.Tooltip.addLoadListener(Spry.Widget.Tooltip.processLoadQueue);
Spry.Widget.Tooltip.prototype.addClassName = function(ele, className)
if (!ele || !className)
return;
if (ele.className.indexOf(className) == -1)
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.Tooltip.prototype.removeClassName = function(ele, className)
if (!ele || !className )
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.Tooltip.prototype.showTooltip = function()
if (!this.visibleTooltip)
this.tooltipElement.style.visibility = 'hidden';
this.tooltipElement.style.zIndex = '9999';
this.tooltipElement.style.display = 'block';
Spry.Widget.Utils.putElementAt(this.tooltipElement, this.pos, {x:this.offsetX, y:this.offsetY}, true);
if(Spry.is.ie && Spry.is.version == '6')
this.createIframeLayer(this.tooltipElement);
if (!this.visibleTooltip)
if (this.useEffect)
if (typeof this.showEffect == 'undefined')
this.showEffect = new Spry.Widget.Tooltip[this.useEffect](this.tooltipElement, {from: 0, to: 1});
this.showEffect.start();
else
this.tooltipElement.style.visibility = 'visible';
this.visibleTooltip = true;
Spry.Widget.Tooltip.prototype.hideTooltip = function(quick)
if (this.useEffect && !quick)
if (typeof this.hideEffect == 'undefined')
this.hideEffect = new Spry.Widget.Tooltip[this.useEffect](this.tooltipElement, {from: 1, to: 0});
this.hideEffect.start();
else
if (typeof this.showEffect != 'undefined')
this.showEffect.stop();
this.tooltipElement.style.display = 'none';
if(Spry.is.ie && Spry.is.version == '6')
this.removeIframeLayer(this.tooltipElement);
if (this.hoverClass && !this.hideTimer)
for (var i = 0; i < this.triggerElements.length; i++)
this.removeClassName(this.triggerElements[i], this.hoverClass);
this.visibleTooltip = false;
Spry.Widget.Tooltip.prototype.displayTooltip = function(show) {
if (this.tooltipElement)
if (this.hoverClass){
for (var i = 0; i < this.triggerElements.length; i++)
this.removeClassName(this.triggerElements[i], this.hoverClass);
if (show)
if (this.hideTimer)
clearInterval(this.hideTimer);
delete(this.hideTimer);
if (this.hoverClass)
if (typeof this.triggerHighlight != 'undefined')
this.addClassName(this.triggerHighlight, this.hoverClass);
var self = this;
this.showTimer = setTimeout(function(){self.showTooltip()}, this.showDelay);
else
if (this.showTimer)
clearInterval(this.showTimer);
delete(this.showTimer);
var self = this;
this.hideTimer = setTimeout(function(){self.hideTooltip();}, this.hideDelay);
this.refreshTimeout();
Spry.Widget.Tooltip.prototype.onMouseOverTrigger = function(e)
var target = '';
if (Spry.is.ie)
target = e.srcElement;
else
target = e.target;
var contains = Spry.Widget.Utils.contains;
for (var i = 0; i < this.triggerElements.length; i++)
if (contains(this.triggerElements[i], target))
target = this.triggerElements[i];
break;
if (i == this.triggerElements.length) return;
if (this.visibleTooltip && this.triggerHighlight && this.triggerHighlight == target)
if (this.hideTimer)
clearInterval(this.hideTimer);
delete(this.hideTimer);
if (this.hoverClass)
if (typeof this.triggerHighlight != 'undefined')
this.addClassName(this.triggerHighlight, this.hoverClass);
return;
var pos = Spry.Widget.Utils.getAbsoluteMousePosition(e);
this.pos = {x: pos.x + this.offsetX, y: pos.y + this.offsetY};
this.triggerHighlight = target;
Spry.Widget.Tooltip.closeAll();
this.displayTooltip(true);
Spry.Widget.Tooltip.prototype.onMouseMoveTrigger = function(e)
var pos = Spry.Widget.Utils.getAbsoluteMousePosition(e);
this.pos = {x: pos.x + this.offsetX, y: pos.y + this.offsetY};
if (this.visibleTooltip)
this.showTooltip();
Spry.Widget.Tooltip.prototype.onMouseOutTrigger = function(e)
var target = '';
if (Spry.is.ie)
target = e.toElement;
else
target = e.relatedTarget;
var contains = Spry.Widget.Utils.contains;
for (var i=0; i < this.triggerElements.length; i++)
if (contains(this.triggerElements[i], target))
return;
this.displayTooltip(false);
Spry.Widget.Tooltip.prototype.onMouseOutTooltip = function(e)
var target = '';
if (Spry.is.ie)
target = e.toElement;
else
target = e.relatedTarget;
var contains = Spry.Widget.Utils.contains;
if (contains(this.tooltipElement, target))
return;
this.displayTooltip(false);
Spry.Widget.Tooltip.prototype.onMouseOverTooltip = function(e)
if (this.hideTimer)
clearInterval(this.hideTimer);
delete(this.hideTimer);
if (this.hoverClass)
if (typeof this.triggerHighlight != 'undefined')
this.addClassName(this.triggerHighlight, this.hoverClass);
Spry.Widget.Tooltip.prototype.refreshTimeout = function()
if (Spry.Widget.Tooltip.refreshTimeout != null)
clearTimeout(Spry.Widget.Tooltip.refreshTimeout);
Spry.Widget.Tooltip.refreshTimeout = null;
Spry.Widget.Tooltip.refreshTimeout = setTimeout(Spry.Widget.Tooltip.refreshAll, 100);
Spry.Widget.Tooltip.prototype.destroy = function()
for (var k in this)
try{
if (typeof this.k == 'object' && typeof this.k.destroy == 'function') this.k.destroy();
delete this.k;
}catch(err){}
Spry.Widget.Tooltip.prototype.checkDestroyed = function()
// checks the parent node. If it exists, then the element is still in the DOM
if (!this.tooltipElement || this.tooltipElement.parentNode == null)
return true;
return false;
Spry.Widget.Tooltip.prototype.attachBehaviors = function()
var self = this;
var ev = Spry.Widget.Utils.addEventListener;
for (var i=0; i< this.triggerElements.length; i++)
ev(this.triggerElements[i], 'mouseover', function(e) {self.onMouseOverTrigger(e || event); return true;}, false);
ev(this.triggerElements[i], 'mouseout', function(e) {self.onMouseOutTrigger(e || event); return true;}, false);
if (this.followMouse)
ev(this.triggerElements[i], 'mousemove', function(e) {self.onMouseMoveTrigger(e || event); return true;}, false);
if (this.closeOnTooltipLeave)
ev(this.tooltipElement, 'mouseover', function(e){self.onMouseOverTooltip(e || event); return true;}, false);
ev(this.tooltipElement, 'mouseout', function(e){self.onMouseOutTooltip(e || event); return true;}, false);
this.listenersAttached = true;
// createIframeLayer for Tooltip
// creates an IFRAME underneath a tooltip element so that it will show above form controls and ActiveX
Spry.Widget.Tooltip.prototype.createIframeLayer = function(tooltip)
if (typeof this.iframeLayer == 'undefined')
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:"";';
layer.scrolling = 'no';
layer.frameBorder = '0';
layer.className = 'iframeTooltip';
tooltip.parentNode.appendChild(layer);
this.iframeLayer = layer;
this.iframeLayer.style.left = tooltip.offsetLeft + 'px';
this.iframeLayer.style.top = tooltip.offsetTop + 'px';
this.iframeLayer.style.width = tooltip.offsetWidth + 'px';
this.iframeLayer.style.height = tooltip.offsetHeight + 'px';
this.iframeLayer.style.display = 'block';
// removeIframeLayer for Tooltip Element
// removes an IFRAME underneath a tooltip to reveal any form controls and ActiveX
Spry.Widget.Tooltip.prototype.removeIframeLayer = function(tooltip)
if (this.iframeLayer)
this.iframeLayer.style.display = 'none';
Spry.Widget.Tooltip.prototype.showError = function(msg)
alert('Spry.Widget.Tooltip ERR: ' + msg);
Spry.Widget.Tooltip.refreshAll = function()
var q = Spry.Widget.Tooltip.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen ; i++)
if (q[i].checkDestroyed())
// the trigger element is no longer in the dom, we should remove the current widget.
q[i].destroy();
q.splice(i, 1);
i--;
qlen = q.length;
Spry.Widget.Tooltip.closeAll = function()
var q = Spry.Widget.Tooltip.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen ; i++)
if (q[i].visibleTooltip)
q[i].hideTooltip(true);
if (q[i].showTimer)
clearTimeout(q[i].showTimer);
if (q[i].hideTimer)
clearTimeout(q[i].hideTimer);
Spry.Widget.Tooltip.Animator = function(element, opts)
this.timer = null;
this.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.Tooltip.Animator.defaultTransition;
this.onComplete = null;
if (typeof element == 'undefined') return;
this.element = Spry.Widget.Utils.getElement(element);
Spry.Widget.Utils.setOptions(this, opts, true);
this.interval = this.duration / this.fps;
Spry.Widget.Tooltip.Animator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Tooltip.Animator.prototype.start = function()
var self = this;
this.startTime = (new Date).getTime();
this.beforeStart();
this.timer = setInterval(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.Tooltip.Animator.prototype.stop = function()
if (this.timer)
clearTimeout(this.timer);
this.timer = null;
Spry.Widget.Tooltip.Animator.prototype.stepAnimation = function(){};
Spry.Widget.Tooltip.Animator.prototype.beforeStart = function(){};
Spry.Widget.Tooltip.Animator.prototype.destroy = function()
for (var k in this)
try
delete this.k;
}catch(err){}
Spry.Widget.Tooltip.Fade = function(element, opts)
Spry.Widget.Tooltip.Animator.call(this, element, opts);
if (Spry.is.ie)
this.origOpacity = this.element.style.filter;
else
this.origOpacity = this.element.style.opacity;
Spry.Widget.Tooltip.Fade.prototype = new Spry.Widget.Tooltip.Animator();
Spry.Widget.Tooltip.Fade.prototype.constructor = Spry.Widget.Tooltip.Fade;
Spry.Widget.Tooltip.Fade.prototype.stepAnimation = function()
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
this.beforeStop();
this.stop();
return;
var ht = this.transition(elapsedTime, this.from, this.to - this.from, this.duration);
if (Spry.is.ie)
var filter = this.element.style.filter.replace(/alpha\s*$\s*opacity\s*=\s*[0-9\.]{1,3}$/, '');
this.element.style.filter = filter + 'alpha(opacity=' + parseInt(ht * 100, 10) + ')';
else
this.element.style.opacity = ht;
this.element.style.visibility = 'visible';
this.element.style.display = 'block';
Spry.Widget.Tooltip.Fade.prototype.beforeStop = function()
if (this.from > this.to)
this.element.style.display = 'none';
if (Spry.is.mozilla)
this.element.style.filter = this.origOpacity;
else
this.element.style.opacity = this.origOpacity;
Spry.Widget.Tooltip.Blind = function(element, opts)
this.from = 0;
this.to = 100;
Spry.Widget.Tooltip.Animator.call(this, element, opts);
this.element.style.visibility = 'hidden';
this.element.style.display = 'block';
this.origHeight = parseInt(Spry.Widget.Utils.getStyleProperty(this.element, 'height'),10);
if (isNaN(this.origHeight))
this.origHeight = this.element.offsetHeight;
if (this.to == 0)
this.from = this.origHeight;
else
this.to = this.origHeight;
Spry.Widget.Tooltip.Blind.prototype = new Spry.Widget.Tooltip.Animator();
Spry.Widget.Tooltip.Blind.prototype.constructor = Spry.Widget.Tooltip.Blind;
Spry.Widget.Tooltip.Blind.prototype.beforeStart = function()
this.origOverflow = Spry.Widget.Utils.getStyleProperty(this.element, 'overflow');
this.element.style.overflow = 'hidden';
Spry.Widget.Tooltip.Blind.prototype.stepAnimation = function()
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
this.beforeStop();
this.stop();
return;
var ht = this.transition(elapsedTime, this.from, this.to - this.from, this.duration);
this.element.style.height = Math.floor(ht) + 'px';
this.element.style.visibility = 'visible';
this.element.style.display = 'block';
Spry.Widget.Tooltip.Blind.prototype.beforeStop = function()
this.element.style.overflow = this.origOverflow;
if (this.from > this.to)
this.element.style.display = 'none';
this.element.style.height = this.origHeight + 'px';
// Spry.Widget.Utils
if (!Spry.Widget.Utils) Spry.Widget.Utils = {};
Spry.Widget.Utils.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.Utils.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.Utils.getElementsByClassName = function(sel)
if (!sel.length > 0)
return null;
var selectors = sel.split(',');
var el = [];
for (var i =0; i < selectors.length; i++)
var cs = selectors[i];
var chunk = cs.split(' ');
var parents = [];
parents[0] = [];
parents[0][0] = document.body;
for (var j = 0; j < chunk.length; j++)
var tokens = Spry.Widget.Utils.getSelectorTokens(chunk[j]);
for (var k =0; k < parents[j].length; k++)
var childs = parents[j][k].getElementsByTagName('*');
parents[j+1] = [];
for (var l=0; l < childs.length; l++)
if (Spry.Widget.Utils.hasSelector(childs[l], tokens))
parents[j+1].push(childs[l]);
if (parents[j])
for (var k = 0; k < parents[j].length; k++)
el.push(parents[j][k]);
return el;
Spry.Widget.Utils.firstValid = function()
var ret = null;
var a = Spry.Widget.Utils.firstValid;
for(var i=0; i< a.arguments.length; i++)
if (typeof(a.arguments[i]) != 'undefined')
ret = a.arguments[i];
break;
return ret;
Spry.Widget.Utils.getSelectorTokens = function(str)
str = str.replace(/\./g, ' .');
str = str.replace(/\#/g, ' #');
str = str.replace(/^\s+|\s+$/g,"");
return str.split(' ');
Spry.Widget.Utils.hasSelector = function(el, tokens)
for (var i =0; i< tokens.length; i++)
switch (tokens[i].charAt(0))
case '.': if (!el.className || el.className.indexOf(tokens[i].substr(1)) == -1) return false; break;
case '#': if (!el.id || el.id != tokens[i].substr(1)) return false; break;
default: if (el.nodeName.toLowerCase != tokens[i]) return false; break;
return true;
Spry.Widget.Utils.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.Utils.getStyleProperty = function(element, prop)
var value;
var camelized = Spry.Widget.Utils.camelize(prop);
try
if (element.style)
value = element.style[camelized];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[camelized];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.Utils.camelize = function(str)
if (str.indexOf('-') == -1)
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
* Spry.Widget.Utils.getPixels
* returns the value of a CSS property as Int, converting medium to 2
* @param {DOMElement} m - elements
* @param {String} s -
Spry.Widget.Utils.getPixels = function (m, s)
var v = Spry.Widget.Utils.getStyleProperty(m, s);
if (v == "medium") {
v = 2;
} else {
v = parseInt(v, 10);
v = isNaN(v)?0:v;
return v;
Spry.Widget.Utils.getAbsoluteMousePosition = function(ev)
var pos = {x:0, y:0};
if (ev.pageX)
pos.x = ev.pageX;
else if (ev.clientX)
pos.x = ev.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
if (isNaN(pos.x)) pos.x = 0;
if (ev.pageY)
pos.y = ev.pageY;
else if (ev.clientY)
pos.y = ev.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
if (isNaN(pos.y)) pos.y = 0;
return pos;
* Spry.Widget.Utils.getBorderBox
* returns a border box object (x,y,width,height) which perfectly covers the el element and its borders
* the x, y are absolute coordinates measured from from the window viewport
* use the box as the second parameter in Spry.Widget.Utils.setBorderBox
* @param {DOMElement or String} el -
* @param {DOMDocument,optional} doc -
Spry.Widget.Utils.getBorderBox = function (el, doc)
doc = doc || document;
if (typeof el == 'string')
el = doc.getElementById(el);
if (!el)
return false;
if (el.parentNode === null || Spry.Widget.Utils.getStyleProperty(el, 'display') == 'none')
//element must be visible to have a box
return false;
var ret = {x:0, y:0, width:0, height:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
ret.width = box.right - box.left;
ret.height = box.bottom - box.top;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
ret.width = box.width;
ret.height = box.height;
var btw = Spry.Widget.Utils.getPixels(el, "border-top-width");
var blw = Spry.Widget.Utils.getPixels(el, "border-left-width");
ret.x -= blw;
ret.y -= btw;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
ret.width = el.offsetWidth;
ret.height = el.offsetHeight;
parent = el.offsetParent;
if (parent != el)
while (parent)
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
var blw = Spry.Widget.Utils.getPixels(el, "border-left-width");
var btw = Spry.Widget.Utils.getPixels(el, "border-top-width");
ret.x -= blw;
ret.y -= btw;
// opera & (safari absolute) incorrectly account for body offsetTop
var ua = navigator.userAgent.toLowerCase();
if (Spry.is.opera || Spry.is.safari && Spry.Widget.Utils.getStyleProperty(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
ret.x -= (isNaN(parent.scrollLeft) ? 0 : parent.scrollLeft);
ret.y -= (isNaN(parent.scrollTop) ? 0 : parent.scrollTop);
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
* Spry.Widget.Utils.setBorderBox
* puts the element el to the location specified by box
* @param {DOMElement} el - the element to be placed
* @param {Object} box - hash containing the x and y coordinates where to put el
Spry.Widget.Utils.setBorderBox = function (el, box) {
var pos = Spry.Widget.Utils.getBorderBox(el, el.ownerDocument);
if (pos === false)
return false;
var delta = {
x:Spry.Widget.Utils.getPixels(el, 'left'),
y:Spry.Widget.Utils.getPixels(el, 'top')
var new_pos = {x:0, y:0, w:0, h:0};
if (typeof box.x == 'number') {
new_pos.x = box.x - pos.x + delta.x;
if (typeof box.y == 'number') {
new_pos.y = box.y - pos.y + delta.y;
if (typeof box.x == 'number') {
el.style.left = new_pos.x + 'px';
if (typeof box.y == 'number') {
el.style.top = new_pos.y + 'px';
return true;
Spry.Widget.Utils.putElementAt = function (source, target, offset, biv)
biv = Spry.Widget.Utils.firstValid(biv, true);
var source_box = Spry.Widget.Utils.getBorderBox(source, source.ownerDocument);
Spry.Widget.Utils.setBorderBox(source, target);
if (biv)
Spry.Widget.Utils.bringIntoView(source);
return true;
* Spry.Widget.Utils.bringIntoView
* set the position of the source element so it is completely visible in the window
* @param {DOMElemenet} source - the element to be
Spry.Widget.Utils.bringIntoView = function (source) {
var box = Spry.Widget.Utils.getBorderBox(source, source.ownerDocument);
if (box === false) {
return false;
var current = {
x:Spry.Widget.Utils.getPixels(source, 'left'),
y:Spry.Widget.Utils.getPixels(source, 'top')
var delta = {x:0, y:0};
var offset_fix = {x:0, y:0};
var strictm = source.ownerDocument.compatMode == "CSS1Compat";
var doc = (Spry.is.ie && strictm || Spry.is.mozilla)?source.ownerDocument.documentElement:source.ownerDocument.body;
offset_fix.x = Spry.Widget.Utils.getPixels(doc, 'border-left-width');
offset_fix.y = Spry.Widget.Utils.getPixels(doc, 'border-top-width');
var st = doc.scrollTop;
var ch = self.innerHeight ? self.innerHeight : doc.clientHeight;
var t = box.y + (Spry.is.ie?-offset_fix.y:offset_fix.y);
var b = box.y + box.height + (Spry.is.ie?-offset_fix.y:offset_fix.y);
if ( b - st > ch) {
delta.y = ch - (b - st);
if (t + delta.y < st) {
delta.y = st-t;
} else if (t < st) {
delta.y = st - t;
if (delta.y != 0) {
source.style.top = (current.y + delta.y) + 'px';
var sl = doc.scrollLeft;
var cw = doc.clientWidth;
var l = box.x + (Spry.is.ie?-offset_fix.x:offset_fix.x);
var r = box.x + box.width + (Spry.is.ie?-offset_fix.x:offset_fix.x);
if ( r - sl > cw) {
delta.x = cw - (r - sl);
if (l + delta.x < sl) {
delta.x = sl-l;
} else if (l < sl) {
delta.x = sl - l;
if (delta.x != 0) {
source.style.left = (current.x + delta.x) + 'px';
Spry.Widget.Utils.contains = function (who, what) {
if (typeof who.contains == 'object') {
return what && who && (who == what || who.contains(what));
} else {
var el = what;
while(el) {
try{
if (el == who) {
return true;
el = el.parentNode;
}catch(a){return false;}
return false;
})(); // EndSpryComponent
@charset "UTF-8";
/* SpryTooltip.css - version 0.2 - Spry 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* HACK FOR IE: to make sure the tooltips show above form controls, we underlay each tooltip with an iframe */
.iframeTooltip
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
.tooltipContent
font-size: 11px;
font-style: italic;
color: #332c40;
width: 96px;
height: 51px;
background: url(../_images/recipe/bubble2.png) no-repeat;
font-family: "Comic Sans MS", cursive;
margin: 0px;
left: -200px;
top: -200px;
padding-top: 5px;
vertical-align: middle;
position: fixed;

I couldn't get this script to work with my code:
<a id="greensource" href="a"><img src="images/greensource.png" alt="Greensource Initiative" width="193" height="71" border="0" usemap="#Map7" id="sprytrigger6" title="Greensource Initiative" />
<map name="Map7" id="Map7">
<area shape="rect" coords="-22,-15,197,79" href="#" />
</map>
</a>
<div class="tooltipContent" id="green">
<div class="secondback">
<div style="padding: 15px;">
<h1>GREENSOURCE</h1>
<h2>INITIATIVE™</h2>
<p>Manufactred within Greensource Initiative™ guildelines for use of recycled materials, renewable energy and non-hazardous packaging materials. RoHS Compliant.</p>
<p class="morebutton"><a href="#">LEARN MORE</a></p>
</div>
</div>
</div>
<script type="text/javascript">

</script>
Maybe someone can point out my problem?
CSS:
.tooltipContent
    margin: 0;
    padding: 0;
    background: #FFF url(../images/bottom-gradient.png) repeat-x bottom left;
    font-family: "Myriad Pro", Tahoma, Geneva, sans-serif;
    text-align: left;
    box-shadow: 2px 2px 4px #b6b5b6;
    -webkit-box-shadow: 2px 2px 4px #b6b5b6;
    -moz-box-shadow: 2px 2px 4px #b6b5b6;
    position: fixed;
#green {
    position: absolute;
    border: none;
    top: 200px;
    left: 200px;

Spry Tool Tip Error

Hi there, I'm really interested in getting the SPRY tool tips
working. I have a page that uses them on all my images. The first
line of tool tips work. The second doesn't follow the mouse
completely and on the last line of images the tool tip appears half
way up the page. Anyone work out why?
The page is:
http://www.hforhome.co.uk/development/tool-tip-deleteme.html
Thanks in advanced for any help.
DWS
The
page in question

I've just noticed that the tool tip doesn't go lower than
lowest part of the initial browser height. Weird. This seems to be
a Firefox problem. I'm only able to test on Firefox3 and Safari.
Can anyone let me know it works in IE?
Thanks
DWS

Dynamic tool tip

Hi guys
I'm wondering if it is possible to have the tool tip for a dropdown box based on the entries in the drop down box.
so if the user could select "a", "b", or "c" from the drop down box, the tool tip would read "a / b / c"
I could of course type it out manually, but I have several dozen and a universal script would be much quicker.
Thank you

Hi,
Adobe have an excellent guide to "Calculations and Scripts", it goes back to v6 but is still applicable today. I can't find it on the Adobe web site so I will upload it.
It covers a lot of visual feedback script and is grouped by object type which is very handy. The information is probably available elsewhere, like the help file (but sometimes you need to know what you are looking for; in order to find it).
Anyway something like this in the exit event:
var vAnswer = this rawValue;
switch(vAnswer)
     case "a":
     DropDownList1.assist.toolTip = "You have selected A";
     break;
     case "b":
     DropDownList1.assist.toolTip = "You have selected B";
     break;
     case "c":
     DropDownList1.assist.toolTip = "You have selected C";
     break;
     default:
     DropDownList1.assist.toolTip = "Please select between a, b, or c";
     break;
Hope that helps,
Niall

Tool Tip line breaks

Similar Messages

Maybe you are looking for